html,body {
    overscroll-behavior: none;
}

.contact-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    padding-bottom: var(--padding-block);
    position: relative;
}
.cta p {
    display: inline-block;
    font-family: var(--font-family-base-text);
    font-size: var(--typography-small);
    text-transform: none;
    position: relative;
    z-index: 1;
}

.cta p a {
    display: inline-block;
    text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
	.scrollable-wrapper {
		overscroll-behavior: none;
		scroll-behavior: smooth;
		position: absolute;
		height: 100vh;
	}
}
.scrollable-wrapper {
	overscroll-behavior: none;
	scroll-behavior: smooth;
	position: absolute;
	height: 100vh;
}
.scrollable {
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (hover: hover) and (pointer: fine) {
	.scrollable {
		pointer-events: none;
		transform: translateX(100%);
		animation: reveal 2s var(--timing-function) forwards;
	}
	.scrollable .cta {
		display: none;
	}
	.scrollable::before,
	.scrollable::after {
		position: absolute;
		z-index: -1;
		content: '';
		top: 0;
		left:0;
		display: block;
		width: 100%;
		height: calc(100% - var(--padding-block) - 20px);
		pointer-events: auto;
	}
	.scrollable::after {
		width: 100%;
		height: 100%;
		left: calc(var(--padding-block) + 150px);
	}
	
}


@media (pointer: coarse) and (hover: none) {
	.contact-section {
		height: 100svh;
	}
	.contact-section .cta {
		display: none;
	}
    .scrollable-wrapper {
        overflow: hidden;
        height: 100svh; !important;
    }
	.scrollable {
		overflow-y: hidden;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: none;
		height: 100svh;
	}
	.scrollable::-webkit-scrollbar {
  		display: none;
	}
	.cta {
		z-index:-2;
		position: sticky;
		left: var(--padding-block);
		top: calc(100svh - 1em - var(--padding-block));
		z-index:1;
	 
	}
	.scrollable-inner {
		position: relative;
		transform: translateX(100%);
		animation: reveal 2s var(--timing-function) forwards;
		z-index:1;
	}
}

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

.scrollable-inner {
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-auto-flow: column;
    column-gap: calc(var(--padding-block) * 0.5);
    will-change: transform;
    margin-left: 63vw;
    pointer-events: auto;
}
@media (max-width: 734px) {
	.scrollable-inner {
		margin-left: 43.5vw;
	}
}

.image-list-item {
    align-self: center;
}

.image-item-img,
.image-item-video {
    width: auto;
    height: auto;
    max-height: 100vh;
    pointer-events: none;
}

@media (pointer: coarse) and (hover: none) {
	.image-item-img,
	.image-item-video {
		max-height: 100svh;
	}
}

.image-item-video {
    object-fit: cover;
    object-position: 50% 50%;
}

.video {
    position: relative;
    width: 100%;
    height: 100%;
}

#muteBtn,
#repeatBtn {
    display: inline-flex !important;
    justify-content: center;
	align-items: center;
    position: absolute;
    z-index: 3;
    bottom: var(--padding-block);
    left: var(--padding-block);
    color: #000;
    width:55px;
    height: 26px;
    line-height: 26px;	
    background: #fff;
}

#repeatBtn {
    left: auto;
    right: var(--padding-block);
    width: 26px;
    pointer-events: none;
    opacity: 0;
}
#repeatBtn svg {
	width: 15px;
	height: auto;
}
#repeatBtn svg path {
	fill: currentColor;
}

#repeatBtn.active {
    pointer-events: auto;
    opacity: 1;
}