:root {
    --gallery-grid-width: min(60vw, 740px);
    --gallery-grid-height: calc(var(--gallery-grid-width) * 0.82);
    --gallery-grid-gap: clamp(10px, 1.4vw, 18px);
}

body.gallery-page {
    margin: 0;
    min-height: 100vh;
    background: #000 url("TaeganGallery.png") center center / cover no-repeat;
    display: block;
}

.gallery-stage {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.gallery-grid {
    position: absolute;
    left: 50%;
    top: calc(42% - 20px);
    transform: translate(-50%, -50%);
    width: var(--gallery-grid-width);
    height: var(--gallery-grid-height);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: var(--gallery-grid-gap);
}

.gallery-cell {
    position: relative;
    overflow: hidden;
    border: 2px dashed rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.55);
}

.gallery-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    :root {
        --gallery-grid-width: min(80vw, 560px);
        --gallery-grid-height: calc(var(--gallery-grid-width) * 0.8);
    }

    .gallery-grid {
        top: calc(46% - 20px);
    }
}