body {
    background-color: rgb(var(--mw-bg-color-default));
}

.page {
    position: fixed;
    display: block;
    background-size: cover;
    width: 100vw;
    height: 100vh;
}

.gallery {
    position: relative;
    display: grid;
    width: 42vw;
    margin: 5rem auto 0 auto;
    gap: 1vw;
    grid-template-columns: repeat(4, calc(42vw/4 - 3vw/4));
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    /* move scrollbar out of the way to not affect grid calculations */
    padding-right: 20px;
    box-sizing: content-box;
}

.gallery img {
    width: 100%;
    display: block;
}

.gallery .landscape {
    grid-column: span 2;
    width: calc(42vw/2 - 0.5vw);
}

.gallery .portrait {
    grid-column: span 1;
    width: calc(42vw/4 - 3vw/4);
}

@media (max-width: 100rem) {
    .gallery {
        margin-top: 0;
        grid-template-columns: repeat(2, calc(42vw/2 - 1vw/2));
    }
    .gallery .landscape {
        width: 100%;
    }
    .gallery .portrait {
        width: calc(42vw/2 - 1vw/2);
    }
}
@media (max-width: 65rem) {
    .gallery {
        width: 58vw;
        grid-template-columns: repeat(2, calc(58vw/2 - 1vw/2));
        margin-left: calc(21vw + 2rem);
    }
    .gallery .portrait {
        width: calc(58vw/2 - 1vw/2);
    }
}
@media (max-width: 31rem) {
    .gallery {
        width: 100%;
        grid-template-columns: repeat(1, 100%);
        gap: 5px;
        margin-left: 0;
    }
    .gallery .landscape {
        grid-column: span 1;
    }
    .gallery .portrait {
        width: 100%;
    }
}

.pswp__dynamic-caption {
    background-color: rgb(var(--mw-bg-color-dark-grey));
    color: rgb(var(--mw-txt-color-grey));
    padding: 0.2rem 1rem 1rem 1rem;
}

.gallery-item-title {
    font-size: 1.2rem;
    font-weight: bold;
}
.gallery-item-date {
    font-size: 0.8rem;
    font-style: italic;
    margin: 0.5rem 0;
}
.gallery-item-medium-size {
    font-size: 0.8rem;
}

.pswp--custom-bg {
    --pswp-bg: rgb(var(--mw-bg-color-dark-grey));
}