.banner {
	background: url(images/banner-5.svg) 100em no-repeat,
		url(images/banner-4.svg) 70em no-repeat,
		url(images/banner-3.svg) 45em no-repeat,
		url(images/banner-2.svg) 25em no-repeat,
		url(images/banner-1.svg) 10em no-repeat;
	background-color: var(--accent-lighter);
	background-size: cover;
	font-size: 5em;
	padding: 2em;
	font-family: var(--h-font);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.2em;
	color: var(--accent);
	transform: rotate3d();
	animation: background-slide 1s forwards 1.5s;
	height: calc(100dvh - (1.5em) * 2.1 - 1.6em);
}

@keyframes background-slide {
	100% {
		background-position: center;
	}
}

.banner span {
	opacity: 0;
	animation: fade-in 2s forwards, deform 1s forwards 1s;
	translate: calc(50% - 2em);
	transition: rotate 0.5s, transform 0.5s;
}

@keyframes deform {
	100% {
		transform: skewX(-10deg);
		translate: 0;
	}
}

/* .banner span:hover {
	rotate: 0deg;
	transform: skewX(0deg);
} */

.banner span:nth-child(even) {
	margin-left: 2em;
}

.card {
	display: flex;
	align-items: center;
	gap: 2em;
	padding-inline: 2em;
	padding-block: 10em;
}

.card h1 {
	margin-top: 0;
	animation-delay: 3s;
	margin-right: auto;
}

.card img {
	max-width: 20em;
	max-height: 14em;
}

/* .card:nth-child(even) {
	background-color: #ececec;
} */

.card > div {
	display: flex;
	flex-direction: column;
	margin-right: auto;
}

@media (width < 820px) {
	.banner {
		background-image: none;
	}

	.banner span {
		animation: fade-in 2s forwards;
	}
	.banner span:nth-child(even) {
		margin: 0;
	}

	.card h1 {
		animation-delay: 1s;
	}
}

@media (width < 710px) {
	.card {
		flex-direction: column;
	}

	.card:nth-child(odd) {
		flex-direction: column-reverse;
	}
}

hr {
	border: none;
	border-bottom: 0.125em var(--accent) dashed;
}