:root {

        --clientDeviceType: deviceTypeUnset;
        --clientDeviceIcon: 🖼️;
        --flexItemMinWidth: 300px;
        --flexItemMaxWidth: 300px;
        --targetWrap: 1;

}

@media (min-width:320px) {

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

@media (min-width:481px) {

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

@media (min-width:641px) {

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

@media (min-width:961px) {

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

@media (min-width:1025px) {

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

@media (min-width:1281px) {

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

@media (min-width:1921px) {

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