html,body {
    overscroll-behavior: none;
}

.scrollable-wrapper {
	overscroll-behavior: none;
	scroll-behavior: smooth;
	position: absolute;
	height: calc(var(--vh, 1vh) * 100);
}

.scrollable {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateX(100%);
    animation: reveal 2s var(--timing-function) forwards;
}

@media (pointer: coarse) {
    .scrollable-wrapper {
    	scroll-behavior: initial;
        overflow: hidden;
        height: 100svh; !important;
    }
	.scrollable {
		overflow-y: hidden;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		height: 100svh;
	}
	.scrollable::-webkit-scrollbar {
  		display: none;
	}
}

@keyframes reveal {
    to {
        transform: translateX(0%);
    }
}

.scrollable-inner {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    column-gap: var(--padding-block);
    padding-left: 40%;
    will-change: transform;
}

@media (max-width: 734px) {
    .scrollable-inner {
        grid-template-rows: repeat(1, 1fr);
    }
}

.image-list-item:nth-child(even) {
    align-self: end;
}

.image-list-item:nth-child(odd) {
    align-self: start;
}

@media (min-width: 735px) {
    .image-list-item:nth-child(even) {
        align-self: start;
    }
}

.image-item {
    transition: transform 0.3s cubic-bezier(0, 0, 0.5, 1);
    --col-h: 50vh;
    --caption-h: 3em;
    --img-h: calc(var(--col-h) - var(--caption-h));
}

.image-list-item.l .image-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: var(--img-h);
}

@media (min-width: 735px) {
    .image-list-item.l:nth-child(odd) + .image-list-item {
        display: flex;
        justify-content: center;
    }
}

@media (min-width: 1441px) {
    .image-item:hover {
        transform: scale(1.014);
    }
}

.image-item:hover {
    transform: scale(1.016);
}

@media (max-width: 1068px) {
    .image-item:hover {
        transform: scale(1.017);
    }
}

@media (max-width: 734px) {
    .image-item:hover {
        transform: scale(1.023);
    }
}

.image-item-img {
    width: auto;
    height: auto;
    max-width: calc(var(--img-h) * 1.1);
    max-height: var(--img-h);
    pointer-events: none;
}

.image-caption {
    display: block;
}

.overlay {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 100;
    background: #fff;
    display: none;
    -webkit-user-select: none;
    user-select: none;
    font-size: var(--typography-medium);
}

.is-overlay .overlay {
    display: block;
}

.overlay::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
}

.overlay-content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#overlayImage {
    width: auto;
    height: auto;
    max-width: 100vw;
    max-height: calc(100vh - 1.3em - var(--padding-block));
}

.overlay .caption {
    padding-top: 0.3em;
    padding-bottom: var(--padding-block);
}

.overlay .controls {
    width: var(--section-width);
    margin-inline: auto;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
}

@supports (mix-blend-mode: difference) {
    .overlay .controls {
        mix-blend-mode: difference;
    }

    :root:not(.theme-dark) .overlay .controls {
        color: #fff;
    }
}

#prevBtn,
#nextBtn {
    width: 30%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

#prevBtn:disabled,
#nextBtn:disabled {
    opacity: 0.2;
    pointer-events: none;
}

#nextBtn {
    right: 0;
    align-items: flex-end;
}

#closeBtn {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    padding-block: var(--padding-block);
    width: 70px;
    text-align: right;
}

#overlayCounter {
    position: absolute;
    bottom: var(--padding-block);
    left: 0;
}

#overlayCounter span {
    display: inline-block;
    width: 2ch;
    text-align: right;
}