.gallery {
    --gallery-width: 80rem;
    --gallery-columns: 3;
    grid-template-columns: repeat(var(--gallery-columns), calc(var(--gallery-width) / var(--gallery-columns)));
    grid-auto-rows: max-content;
    align-items: center;
    justify-items: center;
    display: grid;
}

.galleryImage {
    grid-column: span 1;
    margin: 0.5rem;
    max-height: calc(((6.5 / 10) * (var(--gallery-width) / var(--gallery-columns))) - 1rem);
    overflow: hidden;

    & > img {
        width: calc((var(--gallery-width) / var(--gallery-columns)) - 1rem);
    }
}

@media only screen and (max-width: 80rem) {
    .gallery {
        --gallery-width: 90vw;
        --gallery-columns: 2;
    }
}

@media only screen and (max-width: 50rem) {
    .gallery {
        --gallery-width: 90vw;
        --gallery-columns: 1;
    }
}