.supt-banner-image {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;

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

	&__image-wrapper {
		position: absolute;
		inset: 0;
	}

	&__image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	&__image-desktop {
		display: none;
		object-position: 30% 50%;
		@media (min-width: $breakpoint-lg) {
			display: block;
		}
	}

	&__image-tablet-big {
		display: none;
		object-position: bottom;
		@media (min-width: $breakpoint-md) {
			display: block;
		}
		@media (min-width: $breakpoint-lg) {
			display: none;
		}
	}

	&__image-tablet-small {
		display: none;
		object-position: 50% 80%;
		@media (min-width: $breakpoint-sm) {
			display: block;
		}
		@media (min-width: $breakpoint-md) {
			display: none;
		}
	}

	&__image-mobile {
		object-position: 50% 80%;
		@media (min-width: $breakpoint-sm) {
			display: none;
		}
	}

	&__inner {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		padding-top: 56px;
		gap: 28px;
		height: 700px;
		color: $color-white;
		text-align: center;

		@media (min-width: $breakpoint-lg) {
			padding-top: 0;
			justify-content: center;
			gap: 32px;
			height: 100%;
			min-height: 650px;
			text-align: left;
		}
	}

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

		text-shadow: $text-shadow-glow;
	}

	&__text {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	&__subtitle {
		@extend %t-body-m-uppercase;
	}

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

	&__cta {
		margin: $spacing-4 auto 0;

		@media (min-width: $breakpoint-lg) {
			margin: $spacing-8 0 0;
		}

		.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);
		}
	}

	&.-custom-image {
		.supt-banner-image__inner {
			height: 500px;
			@media (min-width: $breakpoint-lg) {
				height: 100%;
			}
		}

		.supt-banner-image__image-wrapper {
			&::after {
				content: '';
				position: absolute;
				inset: 0;
				z-index: 1;
				background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) 50%);
				@media (min-width: $breakpoint-lg) {
					background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) 50%);
				}
			}
		}
	}
}