/* ------------------------------------------------------------ *\
	Section Hero
\* ------------------------------------------------------------ */

.section-hero {
	position: relative;
	overflow: hidden;
	padding: calc(var(--header-offset) + var(--header-height) + 32px) 0 calc(var(--countdown-overlap) + 86px);
	background: linear-gradient(270deg, var(--c-navy) 0%, var(--c-navy-light) 100%);
	color: var(--c-white);

	.pattern--top {
		top: 84px;
		right: -204px;
		transform: rotate(30deg);
	}

	.pattern--bottom {
		top: 599px;
		left: -239px;
		transform: rotate(-150deg);
	}

	.shell {
		position: relative;
		z-index: 1;
	}

	.section__inner {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--gap-big);
	}

	.section__media {
		flex: 0 1 530px;
	}

	.section__content {
		display: flex;
		flex: 0 1 549px;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.section__subtitle {
		font-family: var(--ff-bold);
		font-size: var(--fs-h3);
		text-transform: uppercase;
		color: var(--c-pink);
	}

	.section__entry p + p {
		margin-top: 1.5em;
	}

	.section__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 16px 30px;
	}
}

@media (max-width: 1023px) {
	.section-hero {
		padding-bottom: calc(var(--countdown-overlap) + 60px);

		.pattern--top {
			top: 40px;
			right: -420px;
		}

		.pattern--bottom {
			top: auto;
			bottom: 120px;
			left: -480px;
		}

		.section__inner {
			flex-direction: column;
			gap: 30px;
		}

		.section__media {
			flex: 0 0 auto;
			width: 100%;
			max-width: 440px;
		}

		.section__content {
			flex: 0 0 auto;
			width: 100%;
			max-width: 549px;
		}
	}
}

@media (max-width: 575px) {
	.section-hero {
		padding: calc(var(--header-offset) + var(--header-height) + 17px) 0 calc(var(--countdown-overlap) + 78px);

		.pattern--top {
			top: 44px;
			right: -418px;
		}

		.pattern--bottom {
			bottom: 68px;
			left: -425px;
		}

		.section__inner {
			gap: 20px;
		}

		.section__media {
			max-width: none;
		}

		.section__content {
			gap: 30px;
		}

		.section__subtitle {
			line-height: 1.2;
		}
	}
}