html {
   --ff-primary: "Zalando Sans Expanded", sans-serif;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(50%, 400px), 1fr));
}

.poster-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 1s ease;
    will-change: transform, opacity, filter;
    cursor: zoom-in;
}

.poster-image:hover {
    filter: grayscale(0%);
}

/* MODAL */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.9);
    cursor: zoom-out;
}

.modal-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 96vw;
    height: auto;
    max-height: 96vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.modal-img {
    width: 100%;
    height: auto;
    max-height: 82vh;
    object-fit: contain;
    pointer-events: auto;
}

.modal-text {
    display: none;
    font-family: var(--ff-primary);
    font-size: var(--fs-md);
    line-height: var(--lh-md);
    font-weight: var(--fw-xlight);
    letter-spacing: .075em;
    color: var(--grey-4);
    max-width: 40ch;
    text-align: center;
    pointer-events: auto;
}

.modal-text[data-active="true"] {
    display: block;
    animation: modal-text-in 0.5s ease-out 0.4s both; /* Staggered: starts near the end of the 500ms grow transition */
}

.modal-text[data-closing="true"] {
    animation: modal-text-out 0.05s ease-in forwards;
}

@keyframes modal-text-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modal-text-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* View Transitions */
::view-transition-group(*) {
    animation-duration: 500ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

:root.view-transition-closing ::view-transition-group(*) {
    animation-duration: 300ms;
}

/* Ensure the image interpolation is smooth */
::view-transition-old(active-poster),
::view-transition-new(active-poster) {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.view-transition-name-poster {
    view-transition-name: active-poster;
}

@media screen and (min-width: 960px) {
    .modal-container {
        flex-direction: row;
        width: 96vw;
        height: 96vh;
        max-height: none;
        max-width: none;
    }

    .modal-img {
        width: auto;
        flex: 0 1 auto;
        max-width: 75%;
        max-height: 96vh; /* Allow image to fill the 96vh container height */
    }

    .modal-text {
        flex: 0 1 20ch;
        text-align: left;
    }
}

.hero-container {
    aspect-ratio: 18 / 8;
    padding-top: 48px;
    position: relative;
}

@media screen and (max-width: 1199px) {
    .hero-container {
        aspect-ratio: 5 / 4;
}
}

@media screen and (max-width: 547px) {
    .hero-container {
        aspect-ratio: 1 / 1;
}
}