/**
 * Split Parallax front-end styling
 *
 * Defines front-end styling. All view.css files
 * like this one only load when enqueued manually
 * or via a block.json file. You can import this
 * file into an editor.css file to apply these
 * front-end styles within the block editor.
 */
.split-parallax {
	position: relative;
	display: grid;
	column-gap: var(--sp-m-rem);
}
@media (min-width: 782px) {
.split-parallax {
		grid-template-columns: 1fr 1fr
}
	}
.split-parallax__item {
	display: contents;
}
.split-parallax__media {
	grid-column: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80vh;
}
@media (max-width: 781px) {
.split-parallax__media {
		height: 60vh
}
	}
.split-parallax__image {
	width: 100%;
	max-width: 25em;
	view-timeline: --split-parallax-media-timeline;
	animation: split-parallax-media-ani linear;
	animation-timeline: --split-parallax-media-timeline;
}
@supports (animation-timeline: --timeline) {
.split-parallax__image {
		opacity: 0
}
	}
:where(.has-scroll-timeline-polyfill) .split-parallax__image {
		opacity: 0;
	}
@keyframes split-parallax-media-ani {
	0%,
	10% {
		opacity: 0;
		transform: perspective(20em) rotateX(-20deg) translateY(7em);
	}
	40%,
	50% {
		opacity: 1;
		transform: none;
	}
	90%,
	100% {
		opacity: 0;
		transform: perspective(20em) rotateX(20deg) translateY(-7em);
	}
}
.split-parallax__content {
	top: 10vh;
	grid-column: 2;
	grid-row: 1;
	position: sticky;
	height: 80vh;
	display: flex;
	align-items: center;
	transition-property: opacity, transform;
	transition-duration: 1s;
	transition-delay: 0.3s;
}
.split-parallax__media:not(.is-active) + .split-parallax__content {
		opacity: 0;
		transform: scale(0.98);
		transition-duration: 0.3s;
		transition-delay: 0s;
	}
@media (max-width: 781px) {
.split-parallax__content {
		display: none
}
	}
@media (min-width: 782px) {
.split-parallax__text {
		max-width: 30em
}
	}
.split-parallax__text p {
		line-height: 1.8;
	}

/* pattern variant with sticky header */
.split-parallax-pattern {
	position: relative;
}

@media (min-height: 1024px) {

.split-parallax-pattern__header {
		position: sticky;
		top: 7vh
}
	}

.split-parallax-pattern__bg {
	position: sticky;
	top: 0;
	height: 0;
	pointer-events: none;
	opacity: 0.2;
}

.split-parallax-pattern__bg video,
	.split-parallax-pattern__bg img {
		height: 100vh;
		object-fit: cover;
		border-radius: var(--bd-rad-m) var(--bd-rad-m) 0 0;
	}