.gallery-content {
    width: 100%;
}

.gallery-container {
    width: 85vh; /* header is 15vh */
    margin: auto;

    display: flex;
    justify-content: center;
}

@media (aspect-ratio < 1 / 1) {
    .gallery-container {
        width: 85%;
    }
}

.gallery-image {
    border: 0.15em;
    border-style: solid;
    border-color: aliceblue;
    border-radius: 0.5em;
    margin: 1%;

    box-shadow: 0 0 0.5em lavender, 0 0 1em cornflowerblue;

    cursor: pointer;

    transition: all 200ms ease-in-out;
}

.gallery-image:hover {
    scale: 104%;
    transform-origin: 50% 50%;
}

.gallery-image-img {
    width: 100%;
    height: 100%; /* very slightly distorts image, TODO: fix flex-grow calculation */
    border-radius: 0.35em;
}

/* TODO: just put this on the gallery container */
.gallery-padding {
    height: 7.5vh;
}

@media (aspect-ratio <= 1 / 1) {
    .gallery-padding {
        height: 7.5vw;
    }
}