.hero-slider-marquee-container {
	position: relative;
	overflow: hidden;
	margin-bottom: var(--space-5);
}

.hero-slider-marquee-container .top-wave,
.hero-slider-marquee-container .bottom-wave { display: none; }

.hero-slider-marquee-container .hero-slider-container { position: relative; }

.hero-slider-marquee-container .hero-slider-container .bottom-wave {
	position: absolute;
	bottom: -20px;
	right: 0;
	display: block;
	width: 100vw;
	height: 15%;
	background-image: url(../svg/wave-edge-bottom.svg);
	background-size: 100%;
	background-repeat: no-repeat;
}

@media(min-width: 64em) {
	.hero-slider-marquee-container {
		display: grid;
		grid-template-columns: 0.601fr 0.399fr;
		margin-bottom: var(--space-6);
	}

	.hero-slider-marquee-container .hero-slider-container .bottom-wave { display: none; }

	.hero-slider-marquee-container .top-wave,
	.hero-slider-marquee-container .bottom-wave {
		display: block;
		position: absolute;
	}

	.hero-slider-marquee-container .top-wave {
		top: -120px;
		left: 0;
		z-index: 2;
		width: 23.2%;
		max-width: 334px;
		height: 39%;
		max-height: 324px;
		background-image: url(../svg/wavetip-top.svg);
		background-size: 100%;
		background-repeat: no-repeat;
		pointer-events: none;
	}

	.hero-slider-marquee-container .top-wave::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: 100%;
		background-color: var(--white);
		transition: transform ease-out 0.65s 0.70s, width linear 0s 1.35s;
	}

	.hero-slider-marquee-container .bottom-wave {
		bottom: -100px;
		left: 0;
		width: 100vw;
		height: calc(290px + (362 - 290) * ((100vw - 1024px) / (1440 - 1024)));
		background-image: url(../svg/wave-edge-bottom.svg);
		background-size: 100%;
		background-position: top;
		background-repeat: no-repeat;
		pointer-events: none;
	}

	.hero-slider-marquee-container .bottom-wave::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: var(--white);
		transition: transform linear 0.65s, width ease-out 0s 0.65s;
	}

	/* ANIMATIONS */
	.hero-slider-marquee-container.active .top-wave::after {
		transform: translateX(100vw);
		width: 0;
	}

	.hero-slider-marquee-container.active .bottom-wave::after {
		transform: translateX(-100vw);
		width: 0;
	}

	.hero-slider-marquee-container .hero-slider-container {
		opacity: 0;
		transform: translateX(-100px);
		transition: opacity ease-in-out 0.1s 1.45s, transform cubic-bezier(0, 0.3, 1, 1) 0.35s 1.5s;
		overflow: hidden;
	}

	.hero-slider-marquee-container.active .hero-slider-container {
		opacity: 1;
		transform: translateX(0);
	}

	.hero-slider-marquee-container .hero-marquee-container {
		opacity: 0;
		transition: opacity ease-in-out 0.35s 2s;
	}

	.hero-slider-marquee-container.active .hero-marquee-container { opacity: 1; }
}

@media (min-width: 1441px) {
	.hero-slider-marquee-container .bottom-wave {
		height: calc(362px + (510 - 362) * ((100vw - 1440px) / (2560 - 1440)));
	}
}