/* shared.css pins body to 100dvh for the home page's fixed-hero layout. The
   gallery is long, so it has to grow with its content - otherwise the scroll
   extent stops a screen short and the bottom clips instead of continuing. */
body {
    height: auto;
}

gallerywrap {
    --gallery-width: 1250px;
    --gallery-gap: 24px;
    --gallery-row: 8px;
    --gallery-inset: 80px;

    display: block;
    max-width: var(--gallery-width);
    margin: 0 auto;
    padding: 0px var(--gallery-inset);
    transition: filter 0.6s ease;
}

html.menu-open gallerywrap {
    filter: blur(5px) brightness(65%);
}

gallerywrap > h1 {
    color: var(--secondary);
    font-size: clamp(0.6rem, 10dvw, 4rem);
    border-bottom: solid 2px var(--primary);
    margin: 40px 0px;
    padding: 20px 20px;
}


gallery {
    --gallery-columns: 3;

    display: grid;
    grid-template-columns: repeat(var(--gallery-columns), 1fr);
    grid-auto-rows: var(--gallery-row);
    grid-auto-columns: 0;
    column-gap: var(--gallery-gap);
    row-gap: 0px;
    padding-bottom: 24px;
    margin: 0 auto;
}

gallery > img {
    height: 360px;
    grid-row: span 48;
    min-width: 0;
    margin-bottom: var(--gallery-gap);
    border: solid 2px var(--primary);
    border-radius: 8px;
    object-fit: cover;
    object-position: center;
}

@media screen and (max-width: 900px) {
    gallery {
        --gallery-columns: 2;
    }
}

@media screen and (max-width: 600px) {
    gallery {
        display: block;
    }

    gallery > img {
        display: block;
        height: auto;
    }

    gallerywrap {
        --gallery-inset: 12px;
    }

    gallerywrap > h1 {
        margin-top: 20px;
    }
}