:root {
    --column-width: 150px;
    --gap-length: 20px;
    --row-height: 150px;
}

.gallery__container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));
    grid-gap: var(--gap-length);
}

.gallery__container > a {
    display: grid;
    grid-template-columns: 1fr;
}

.gallery__container > a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
}

.gallery__container > a:hover {
    cursor: zoom-in;
}

.gallery__container > a:hover img {
    opacity: 0.8;
}