@media (max-width: 600px) {
    #banner #logo {
        background-image: url("/src/pub/img/logo/600.webp");
    }
}

/* Firefox will load 1024.webp for 600px resolution without half offset and
 * will not load anything at all if min-width = 601px.
 * I really do not know why this happens. */

@media (min-width: 600.5px) and (max-width: 1024px) {
    #banner #logo {
        background-image: url("/src/pub/img/logo/1024.webp");
    }
}
@media (min-width: 1024.5px) and (max-width: 1536px) {
    #banner #logo {
        background-image: url("/src/pub/img/logo/1536.webp");
    }
}
@media (min-width: 1536.5px) and (max-width: 1920px) {
    #banner #logo {
        background-image: url("/src/pub/img/logo/2k.webp");
    }
}
@media (min-width: 1920.5px) {
    #banner #logo {
        background-image: url("/src/pub/img/logo/4k.webp");
    }
}