.supt-section-media-full {
	position: relative;
	overflow: hidden;

	display: flex;
	align-items: center;

	@media (min-width: $breakpoint-lg) {
		aspect-ratio: 1680/650;
	}

	&__shadow,
	&__background {
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 1;
	}

	&__shadow {
		opacity: 0;
		background: linear-gradient(0deg, rgba(1, 1, 1, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
	}
	&__background {
		background: linear-gradient(180deg, rgba(1, 1, 1, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
	}

	&__media {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform: scale(1.2);
		will-change: transform;
	}

	&__wrapper {
		position: relative;
	}

	&__content {
		display: flex;
		position: relative;
		z-index: 1;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: $spacing-4;
		color: white;
		text-align: center;
		height: 100%;
		min-height: 650px;
		padding: $spacing-7;

		z-index: 2;

		@media (min-width: $breakpoint-sm) {
			padding: 0;
		}
	}

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

	&__description {
		display: flex;
		flex-direction: column;
		gap: $spacing-2;
	}

	&__text {
		@extend %t-body-m;
		p:not(:last-child) {
			margin-bottom: 10px;
		}
	}

	&__subtitle {
		@extend %t-h3;
		font-weight: 500;
	}

	&__cta {
		margin-top: $spacing-2;
	}

	.supt-button {
		&__wrapper {
			box-shadow:
				8px 8px 16px 0px rgba(220, 221, 222, 0.3),
				-8px -8px 16px 0px rgba(255, 255, 255, 0.3);
		}
	}

	&.-big {
		.supt-section-media-full__shadow {
			opacity: 1;
		}
		.supt-section-media-full__background {
			opacity: 0;
			/* background: linear-gradient(180deg, rgba(1, 1, 1, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%); */
		}

		.supt-section-media-full__description {
			@extend %t-body-m;
		}
	}

	&.-image-top {
		.supt-section-media-full__media {
			object-position: top;
		}
	}
	&.-image-y-25 {
		.supt-section-media-full__media {
			object-position: 50% 25%;
		}
	}
	&.-image-x-65 {
		.supt-section-media-full__media {
			object-position: 65% 50%;
		}
	}

	&.-big {
		height: 100vh;

		@media (min-width: $breakpoint-lg) {
			aspect-ratio: unset;
		}

		.supt-section-media-full__text {
			@extend %t-h4;
			font-weight: 400;
		}
	}
}