Hero Text Media: With Image

.supt-hero-text-media {
	display: flex;
	position: relative;
	min-height: 100svh;
	height: 100svh;

	@media (min-width: $breakpoint-xxl) {
		min-height: 75svh;
		height: 75svh;
	}

	&__media {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		object-fit: cover;
		overflow: hidden;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background: linear-gradient(
				180deg,
				rgb(0 0 0 / 70%) 0%,
				rgb(0 0 0 / 10%) 50%,
				rgb(0 0 0 / 70%) 100%
			);
		}

		img,
		video {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	&__content {
		position: relative;
		z-index: 2;
		color: $color-white;
		padding-top: $spacing-14;
		padding-bottom: $spacing-40;
		align-self: flex-end;

		@media (min-width: $breakpoint-md) {
			padding-top: $spacing-20;
		}
	}

	&__headline {
		@mixin clamp gap, $spacing-4, $spacing-6, $breakpoint-xs, $breakpoint-xl;
		display: flex;
		flex-direction: column;

		.supt-post-metas,
		.supt-tag__label {
			color: $color-white;
		}
	}

	&__title {
		@extend %t-h1;
		margin-bottom: 0;
	}

	&__description {
		@extend %t-body-m;

		a {
			@extend %link-underline;
			font-weight: 500;
			outline: none;
		}

		/* No title, so make it bigger */
		&:first-child {
			@extend %t-h2;
		}
	}

	&.-small {
		height: auto;
		min-height: auto;

		/* This top spacing if to leave room for the nav & breadcrumb. */
		padding-top: calc(69px + 18px + $spacing-4 * 2);
		@media (min-width: $breakpoint-md) {
			padding-top: calc(81px + 20px + $spacing-6 * 2);
		}

		.supt-hero-text-media__media {
			img {
				transform-origin: 50% 80%;
			}
			&::after {
				background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
			}
		}

		.supt-hero-text-media__content {
			padding-block: $spacing-10 $spacing-16;

			@media (min-width: $breakpoint-md) {
				padding-block: $spacing-16 $spacing-33;
			}
		}
	}

	&.-image-right {
		.supt-hero-text-media__media {
			img {
				object-position: right;
			}
		}
	}

	& + .supt-section-team,
	& + .supt-section-contact,
	& + .supt-section-cards {
		@mixin clamp padding-top, $spacing-16, $spacing-32, $breakpoint-xs, $breakpoint-xl, true;
	}

	& + .supt-listing-cards {
		@mixin clamp padding-top, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl, true;
	}

	& + .supt-single {
		@mixin clamp padding-top, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl, true;
	}
}