img.thumb {aspect-ratio: var(--cinema);}
a.none {pointer-events: none;}

a.thumbnail {
    position: relative;
    border-radius: var(--s4);
    box-shadow: inset 0px 0px 0px 1px var(--light20);
}

a.thumbnail > div {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    color: var(--prime);
    border-radius: var(--s4);
    opacity: 1;
}

a.thumbnail > div { /* old - delete this when done */
    -webkit-transition: opacity var(--time) var(--ease), background-color var(--time) var(--ease);
    -moz-transition: opacity var(--time) var(--ease), background-color var(--time) var(--ease);
    -o-transition: opacity var(--time) var(--ease), background-color var(--time) var(--ease);
    transition: opacity var(--time) var(--ease), background-color var(--time) var(--ease);
}

a.thumbnail { /* new */
    -webkit-transition: opacity var(--time) var(--ease), background-color var(--time) var(--ease);
    -moz-transition: opacity var(--time) var(--ease), background-color var(--time) var(--ease);
    -o-transition: opacity var(--time) var(--ease), background-color var(--time) var(--ease);
    transition: opacity var(--time) var(--ease), background-color var(--time) var(--ease);
}

/* BG styling */
div.bg img {width: auto; height: auto; max-width: 100%; max-height: 40%;}
div.bg {
    background: var(--shadow); /* fallback */
    opacity: 0;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 600;
    display: grid;
    place-items: center;
    text-align: center;
    text-shadow:
        0px 0px 32px hsla(0, 0%, 0%, 0.5),
        0px 0px 24px hsla(0, 0%, 0%, 0.2),
        0px 0px 16px hsla(0, 0%, 0%, 0.2);
}

section.content {z-index: 700;}
footer, div.divider {position: relative; z-index: 750;}
@media only screen and (min-width: 1401px) {
    section.narrow {display: none;} /* fallback because i'm lazy to code specifically for mobile */
    section.content {
        padding-top: calc( var(--s128) + var(--s56) );
        padding-bottom: var(--s128);
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    section.content > a.thumbnail {grid-column-end: span 4;}
}
@media only screen and (max-width: 1400px) and (min-width: 769px) {
    section.narrow {display: none;} /* fallback because i'm lazy to code specifically for mobile */
    section.content {
        padding-top: calc(2 * var(--s64));
        padding-bottom: var(--s64);
    }
    section.content > a.thumbnail {grid-column-end: span 8;}
}
@media only screen and (max-width: 768px) and (min-width: 0px) {
    section.wide {display: none;} /* fallback because i'm lazy to code specifically for mobile */
    section.content {
        padding-top: calc( 1.5 * var(--s64) );
        padding-bottom: var(--s32);
    }
    section.content > a.thumbnail {grid-column-end: span 4;}
}

/* boring */
div.boring {
    aspect-ratio: var(--cinema);
    display: grid;
    place-items: center;
    text-align: center;
    text-shadow:
        0px 0px 32px hsla(0, 0%, 0%, 0.5),
        0px 0px 24px hsla(0, 0%, 0%, 0.2),
        0px 0px 16px hsla(0, 0%, 0%, 0.2);
}

/* Lazy fallback */
@media (hover: none) {
    section.wide {display: none;} 
    section.narrow {display: grid;}
}
@media (hover: hover) {
    section.wide {display: grid;} 
    section.narrow {display: none;}
}