@media all and (min-width: 1260px) {
    nav.previous, nav.next {
        width: auto !important;
        max-width: auto;
    }
    nav.previous {
        right: 16px !important;
    }
    nav.next {
        left: 16px !important;
    }
}

// scaling below desktop
@media all and (max-width: 60em) {
    body.essay {
        article > *:not(figure):not(picture) {
            grid-area: auto / 1 / auto / 12;
        }
    }
}

// custom L breakpoint classes
@media screen and (min-width: 46.875em) and (max-width: 60em) {
    .white-l { 
        color: #fff; 
    }
}

// custom XL breakpoint classes
@media screen and (min-width: 60em) {
    .white-xl {
        color: #fff;
    }
}