/* On large screens, size-large.css sizes the work-card image with 180vh, which is
   narrower than the card on wide (low aspect-ratio) displays and leaves gaps on the
   sides until the scroll-zoom kicks in. max() keeps it at least full card width. */
@media (min-width: 1440px) {
    .case-study {
        background-size: max(100vw, 180vh);
    }
}
/* On mobile, anchor the hero text to the bottom of the screen with a 32px
   gap. Use dvh (not vh) so the address bar can't push the last line off
   the bottom and clip it. */
@media (max-width: 1024px) {
    .introduction {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        box-sizing: border-box;
        height: auto;
        min-height: 100dvh;
        margin: 0 2rem 2rem;
        padding: 0 0 2rem;
    }
}
/* Mobile zoom that scales by height so the (now square) card stays fully
   covered by the landscape photo throughout the scroll animation. */
@keyframes case-study-grow-cover {
    to { background-size: auto 115%; }
}
/* On mobile, make the case-study cards and the footer buttons square
   (height matches their full width). */
@media (max-width: 767px) {
    .case-study {
        height: auto;
        aspect-ratio: 1 / 1;
        /* Size by height (not width) so the photo always fills the taller
           square top-to-bottom; width overflows and is cropped/centered. */
        background-size: auto 100%;
        animation-name: case-study-grow-cover;
    }
    #more-work, #about, #contact {
        height: auto;
        aspect-ratio: 1 / 1;
    }
}