@media screen and (max-width: 3000px)
{
    #spanWidth::after{
        content: "mw: max 3000";
    }
}
@media screen and (max-width: 2500px)
{
    #spanWidth::after{
        content: "mw: max 2500";
    }
}
@media screen and (max-width: 2200px)
{
    #spanWidth::after{
        content: "mw: max 2200";
    }
}
@media screen and (max-width: 2000px)
{
    #spanWidth::after{
        content: "mw: max 2000";
    }
}
@media screen and (max-width: 1800px)
{
    #spanWidth::after{
        content: "mw: max 1800";
    }
}
@media screen and (max-width: 1600px)
{
    #spanWidth::after{
        content: "mw: max 1600";
    }
}
@media screen and (max-width: 1400px)
{
    #spanWidth::after{
        content: "mw: max 1400";
    }
}
@media screen and (max-width: 1200px)
{
    #spanWidth::after{
        content: "mw: max 1200";
    }
}
@media screen and (max-width: 1000px)
{
    #spanWidth::after{
        content: "mw: max 1000";
    }
}
@media screen and (max-width: 800px)
{
    #spanWidth::after{
        content: "mw: max 800";
    }
}
@media screen and (max-width: 600px)
{
    #spanWidth::after{
        content: "mw: max 600";
    }
}

@media screen and (max-device-width: 3000px)
{
    #spanDevWidth::after{
        content: "dev: max 3000";
    }
}
@media screen and (max-device-width: 2500px)
{
    #spanDevWidth::after{
        content: "dev: max 2500";
    }
}
@media screen and (max-device-width: 2200px)
{
    #spanDevWidth::after{
        content: "dev: max 2200";
    }
}
@media screen and (max-device-width: 2000px)
{
    #spanDevWidth::after{
        content: "dev: max 2000";
    }
}
@media screen and (max-device-width: 1800px)
{
    #spanDevWidth::after{
        content: "dev: max 1800";
    }
}
@media screen and (max-device-width: 1600px)
{
    #spanDevWidth::after{
        content: "dev: max 1600";
    }
}
@media screen and (max-device-width: 1400px)
{
    #spanDevWidth::after{
        content: "dev: max 1400";
    }
}
@media screen and (max-device-width: 1200px)
{
    #spanDevWidth::after{
        content: "dev: max 1200";
    }
}
@media screen and (max-device-width: 1000px)
{
    #spanDevWidth::after{
        content: "dev: max 1000";
    }
}
@media screen and (max-device-width: 800px)
{
    #spanDevWidth::after{
        content: "dev: max 800";
    }
}
@media screen and (max-device-width: 600px)
{
    #spanDevWidth::after{
        content: "dev: max 600";
    }
}

@media screen and (max-height: 3000px)
{
    #spanHeight::after{
        content: "mw: max 3000";
    }
}
@media screen and (max-height: 2500px)
{
    #spanHeight::after{
        content: "mw: max 2500";
    }
}
@media screen and (max-height: 2200px)
{
    #spanHeight::after{
        content: "mw: max 2200";
    }
}
@media screen and (max-height: 2000px)
{
    #spanHeight::after{
        content: "mw: max 2000";
    }
}
@media screen and (max-height: 1800px)
{
    #spanHeight::after{
        content: "mw: max 1800";
    }
}
@media screen and (max-height: 1600px)
{
    #spanHeight::after{
        content: "mw: max 1600";
    }
}
@media screen and (max-height: 1400px)
{
    #spanHeight::after{
        content: "mw: max 1400";
    }
}
@media screen and (max-height: 1200px)
{
    #spanHeight::after{
        content: "mw: max 1200";
    }
}
@media screen and (max-height: 1000px)
{
    #spanHeight::after{
        content: "mw: max 1000";
    }
}
@media screen and (max-height: 800px)
{
    #spanHeight::after{
        content: "mw: max 800";
    }
}
@media screen and (max-height: 600px)
{
    #spanHeight::after{
        content: "mw: max 600";
    }
}
@media screen and (max-height: 3000px)
{
    #spanHeight::after{
        content: "mh: max 3000";
    }
}
@media screen and (max-height: 2500px)
{
    #spanHeight::after{
        content: "mh: max 2500";
    }
}
@media screen and (max-height: 2200px)
{
    #spanHeight::after{
        content: "mh: max 2200";
    }
}
@media screen and (max-height: 2000px)
{
    #spanHeight::after{
        content: "mh: max 2000";
    }
}
@media screen and (max-height: 1800px)
{
    #spanHeight::after{
        content: "mh: max 1800";
    }
}
@media screen and (max-height: 1600px)
{
    #spanHeight::after{
        content: "mh: max 1600";
    }
}
@media screen and (max-height: 1400px)
{
    #spanHeight::after{
        content: "mh: max 1400";
    }
}
@media screen and (max-height: 1200px)
{
    #spanHeight::after{
        content: "mh: max 1200";
    }
}
@media screen and (max-height: 1000px)
{
    #spanHeight::after{
        content: "mh: max 1000";
    }
}
@media screen and (max-height: 800px)
{
    #spanHeight::after{
        content: "mh: max 800";
    }
}
@media screen and (max-height: 600px)
{
    #spanHeight::after{
        content: "mh: max 600";
    }
}

@media screen and (max-device-height: 3000px)
{
    #spanDevHeight::after{
        content: "devh: max 3000";
    }
}
@media screen and (max-device-height: 2500px)
{
    #spanDevHeight::after{
        content: "devh: max 2500";
    }
}
@media screen and (max-device-height: 2200px)
{
    #spanDevHeight::after{
        content: "devh: max 2200";
    }
}
@media screen and (max-device-height: 2000px)
{
    #spanDevHeight::after{
        content: "devh: max 2000";
    }
}
@media screen and (max-device-height: 1800px)
{
    #spanDevHeight::after{
        content: "devh: max 1800";
    }
}
@media screen and (max-device-height: 1600px)
{
    #spanDevHeight::after{
        content: "devh: max 1600";
    }
}
@media screen and (max-device-height: 1400px)
{
    #spanDevHeight::after{
        content: "devh: max 1400";
    }
}
@media screen and (max-device-height: 1200px)
{
    #spanDevHeight::after{
        content: "devh: max 1200";
    }
}
@media screen and (max-device-height: 1000px)
{
    #spanDevHeight::after{
        content: "devh: max 1000";
    }
}
@media screen and (max-device-height: 800px)
{
    #spanDevHeight::after{
        content: "devh: max 800";
    }
}
@media screen and (max-device-height: 600px)
{
    #spanDevHeight::after{
        content: "devh: max 600";
    }
}