/* style for the film page */

/* grid info from https://learncssgrid.com/ */

#filmgrid {
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
 
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}


#filmgrid {
    display: block;
    margin: auto;
    width: 94%;
}

.film_block img {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
    opacity: 100%;
    transition: 0.25s;
}

.film_block {
    position: relative;
}

.description {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    /* keep off until hover */
    opacity: 0%;
    transition: 0.25s;
}

/* courtesy of https://stackoverflow.com/questions/17393231/css-on-hover-show-and-hide-different-divs-at-the-same-time */
.film_block:hover .description { 
    opacity: 100%;
}

.film_block:hover img {
    opacity: 65%;
}

/* changes columns to single row if screen is too small */
@media screen and (min-width: 640px) {
    #filmgrid{
        display: grid;
        row-gap: 4em;
        column-gap: 1em;
        grid-template-columns: 1fr 1fr;
    }
    /* .film_block {
        background-color: aqua;
    } */
}

@media screen and (max-width: 640px) {
    .film_block {
        padding-top: 1vw;
        padding-bottom: 1vw;
    }
    .description {
        opacity: 100%;
    }
}

/* adds space to bottom of page */
.spacer {
    padding-top: 1vw;
    padding-bottom: 1vw;
}