.media-info {
    display:block;
    position: fixed;
    z-index: 999;
    bottom:0;
    left:0;
    padding:0.5em;
    font-size:0.7rem;
    background:rgba(0, 0, 0, 0.2);
    color: #ffffff;
}
.media-info::before {
    content: 'Unknown';
}
/* 1920px = 120em */
/* Desktop > 1920 */
@media (min-width:120em){
    .media-info::before {
        content: 'Desktop > 1920';
    }
}
/* 1920px = 120em */
/* Desktop <=  1920 */
@media (max-width:120em){
    .media-info::before {
        content: 'Desktop \2264  1920';
    }
}
/* 1680px = 105em */
/* Desktop <=  1680 */
@media (max-width:105em){
    .media-info::before {
        content: 'Desktop \2264  1680';
    }
}
/* 1440px = 90em */
/* Desktop <=  1440 */
@media (max-width:90em){
    .media-info::before {
        content: 'Desktop \2264  1440';
    }
}
/* 1366px = 85.375em */
/* Desktop <=  1366, iPad 12 landscape */
@media (max-width:86em){
    .media-info::before {
        content: 'Desktop \2264  1366, iPad 12 landscape';
    }
}
/* 1200px = 75em  900px=56.25em*/
/* Tablet landscape */
@media (max-width:75em) and (max-height:56em) {
    .media-info::before {
        content: 'tablet landscape';
    }
}
/* all portrait */
@media (orientation: portrait) {
}
/* 1024px = 64em */
/* Tablet portrait */
@media (max-width:64em) and (orientation: portrait) {
    .media-info::before {
        content: 'tablet portrait';
    }
}
/* 600px = 37.5em */
/* Small tablet portrait */
@media (max-width:38em) and (orientation: portrait) {
    .media-info::before {
        content: 'small tablet portrait';
    }
}
/*@media (max-width:1024px) and (orientation: portrait) {
    .media-info::before {
        content: 'iPad Pro 12 portrait';
    }
}
@media (max-width:834px) and (orientation: portrait) {
    .media-info::before {
        content: 'iPad Pro 10 portrait';
    }
}
@media (max-width:768px) and (orientation: portrait) {
    .media-info::before {
        content: 'iPad portrait';
    }
}*/
/* 900px=56.25em 420px = 26.25em */
/* Large phone landscape */
@media (max-width:56em) and (max-height:27em) {
    .media-info::before {
        content: 'large phone landscape';
    }
}
/* Phone landscape */
@media (max-width:760px) and (max-height:420px) {
    .media-info::before {
        content: 'phone landscape';
    }
}
/*@media (max-width:812px) and (orientation: landscape) {
    .media-info::before {
        content: 'iPhone X landscape';
    }
}
@media (max-width:736px) and (orientation: landscape) {
    .media-info::before {
        content: 'iPhone 6/7/8 plus landscape';
    }
}
@media (max-width:667px) and (orientation: landscape) {
    .media-info::before {
        content: 'iPhone 6/7/8 landscape';
    }
}
@media (max-width:568px) and (orientation: landscape) {
    .media-info::before {
        content: 'iPhone 5/SE landscape';
    }
}*/
/* 420px = 26.25em */
/* Phone */
@media (max-width:27em){
    .media-info::before {
        content: 'phone';
    }
}
/* 360px = 22.5em */
/* Small phone */
@media (max-width:22em){
    .media-info::before {
        content: 'small phone';
    }
}
/*@media (max-width:414px){
    .media-info::before {
        content: 'iPhone 6/7/8 plus';
    }
}
@media (max-width:375px){
    .media-info::before {
        content: 'iPhone 6/7/8/X';
    }
}
@media (max-width:320px){
    .media-info::before {
        content: 'iPhone 5/SE';
    }
}*/