:root {

    --clientDeviceType: deviceTypeUnset;
    --clientDeviceIcon: 🖼️;
    --flexTileMinWidth: 300px;
    --flexTileMaxWidth: 300px;
    --targetWrap: 1;

}

@media (min-width:320px) {

    /* smartphones, iPhone, portrait 480x320 phones */
    :root {
        --clientDeviceType: PhoneSmall;
        --clientDeviceIcon: 🖁;
        --flexTileMinWidth: 300px;
        --flexTileMaxWidth: 300px;
        --targetWrap: 1;
    }
}

@media (min-width:481px) {

    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    :root {
        --clientDeviceType: PhoneSmart;
        --clientDeviceIcon: 📱;
        --flexTileMinWidth: 300px;
        --flexTileMaxWidth: 460px;
        --targetWrap: 1;
    }
}

@media (min-width:641px) {

    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    :root {
        --clientDeviceType: TabletPortrait;
        --clientDeviceIcon: 📳;
        --flexTileMinWidth: 300px;
        --flexTileMaxWidth: 620px;
        --targetWrap: 1;
    }
}

@media (min-width:961px) {

    /* tablet, landscape iPad, lo-res laptops ands desktops */
    :root {
        --clientDeviceType: TabletLandscape;
        --clientDeviceIcon: 💻;
        --flexTileMinWidth: 300px;
        --flexTileMaxWidth: 460px;
        --targetWrap: 2;
    }
}

@media (min-width:1025px) {

    /* big landscape tablets, laptops, and desktops */
    :root {
        --clientDeviceType: Desktop;
        --clientDeviceIcon: 🖥️;
        --flexTileMinWidth: 300px;
        --flexTileMaxWidth: 460px;
        --targetWrap: 2;
    }
}

@media (min-width:1281px) {

    /* hi-res laptops and desktops */
    :root {
        --clientDeviceType: DesktopModern;
        --clientDeviceIcon: 🍎;
        --flexTileMinWidth: 300px;
        --flexTileMaxWidth: 420px;
        --targetWrap: 3;
    }
}

@media (min-width:1921px) {

    /* HiDpi laptops and desktops */
    :root {
        --clientDeviceType: DesktopHighend;
        --clientDeviceIcon: 🪷;
        --flexTileMinWidth: 420px;
        --flexTileMaxWidth: 640px;
        --targetWrap: 3;
        --clientScale: 1;
    }
}