.gallery {
    padding: 10px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    column-gap: 10px;
    row-gap: 10px;
    justify-items: center;
    align-items: center;
}

.gallery-item {
    width: 200px;
    cursor: pointer;
}

.overlay {
    --control-size: var(--text-xxxxl);

    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    width: 100vw;
    height: 100vh;

    display: grid;
    grid-template-areas:
            'close close close'
            'back image next';
    grid-template-rows: var(--control-size) auto;
    grid-template-columns: var(--control-size) auto var(--control-size);
    justify-items: center;
    align-items: center;

    justify-content: center;
    align-content: center;
}

.control {
    font-size: var(--control-size);
    cursor: pointer;
    color: var(--color-text-inverse);
}

.control.close {
    grid-area: close;
    justify-self: right;
    align-self: center;
}

.control.next {
    grid-area: next;
}

.control.back {
    grid-area: back;
}

.overlay .image {
    grid-area: image;
    max-width: 750px;
}

.image img {
    max-width: 100%;
    max-height: 90vh;
}

@media only screen and (max-width: 876px) {
    .gallery {
        grid-template-columns: auto auto auto;
    }
}

@media only screen and (max-width: 660px) {
    .gallery {
        grid-template-columns: auto auto;
    }

    .overlay {
        --control-size: var(--text-xxxl);
    }
}

@media only screen and (max-width: 460px) {
    .gallery {
        grid-template-columns: auto;
    }

    .overlay {
        --control-size: var(--text-xxl);
    }
}

.noscroll {
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
}