.scroll-animation {
	margin-top: var(--scroll-anim-mt-mobile, 0);
	margin-bottom: var(--scroll-anim-mb-mobile, 0);
	display: flex;
	width: 100%;
}

@media (min-width: 851px) {
	.scroll-animation {
		margin-top: var(--scroll-anim-mt-desktop, 0);
		margin-bottom: var(--scroll-anim-mb-desktop, 0);
	}
}

.scroll-anim-inner{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 var(--gutters);
    position: relative;
}
.scroll-anim-text h2{
    margin: 0;
}
.scroll-anim-wrapper{
    display: flex;
    width: 100%;
    overflow: hidden;
    height: calc(100vh - var(--header-height, 0px));
    container-type: inline-size;
    gap: 2%;
}
.scroll-anim-left-col, .scroll-anim-right-col{
    display: flex;
    width: 49%;
    position: relative;
}
.scroll-anim-right-col {
    overflow: hidden;
}
.scroll-anim-image{
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.scroll-anim-image{
    transform: translate(0%, -50%);
}
.scroll-anim-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.scroll-anim-item{
    display: flex;
    position: absolute;
    height: auto;
    max-height: 50vh;
    overflow-y: auto;
    width: 80%;
    flex-direction: column;
    top: 50%;
    right: 0;
    opacity: 0;
}
.scroll-anim-image:nth-child(2){
    z-index: 4;
}
@media (max-width: 576px) {
    .scroll-anim-wrapper{
        flex-direction: column;
    }
    .scroll-anim-left-col, .scroll-anim-right-col{
        display: flex;
        width: 100%;
        position: relative;
        height: 50%;
    }
    .scroll-anim-image{
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: none;
    }
    .scroll-anim-image img{
        object-fit: contain;
    }
}