.supt-section-text-media {
	background: $color-grey-background;

	.container {
		--container-width: $grid-container-max-width;
	}

	.row {
		margin-block: 0;
		align-items: stretch;
	}

	&__wrapper {
		position: relative;
		overflow: hidden;
	}

	&__inner {
		align-self: center;

		margin-top: $spacing-8;
		margin-bottom: $spacing-16;

		@media (min-width: $breakpoint-lg) {
			margin-top: $spacing-16;
			margin-bottom: $spacing-24;
		}
	}

	&__media-col {
		flex: 1;
	}

	&__media {
		overflow: hidden;

		width: 100vw;

		margin-inline: calc(var(--supt-container-padding-inline) * -1);
		aspect-ratio: 1/1;

		@media (min-width: $breakpoint-md) {
			height: 100%;
			margin-inline: 0;
			margin-left: calc(-1 * (var(--supt-container-padding-inline)));
			width: calc(100% + var(--supt-container-padding-inline) + $grid-gutter-width);
		}
		@media (min-width: $grid-container-max-mq) {
			margin-left: calc(
				-1 * (((100vw - var(--container-width)) / 2) + var(--supt-container-padding-inline))
			);
			width: calc(
				100% + ((100vw - var(--container-width)) / 2) + var(--supt-container-padding-inline) +
					$grid-gutter-width
			);
		}

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			aspect-ratio: 1/1;
		}
	}

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

		span {
			opacity: 0.6;
		}
	}

	&__content {
		color: $color-grey-5;

		> p {
			margin-top: $spacing-3;
			@media (min-width: $breakpoint-lg) {
				margin-top: $spacing-4;
			}
		}
		> ul,
		> ol {
			margin-top: $spacing-4;

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

		p {
			@extend %paragraph-section-text;
		}

		ul,
		ol {
			@extend %list-section-text;
		}
	}

	&__cta {
		margin-block-start: $spacing-8;
	}

	.supt-line {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;
		display: none;

		--line-xs-width: 1px;
		--line-xs-height: 100%;
		--line-md-width: 1px;
		--line-md-height: 100%;

		@media (min-width: $breakpoint-md) {
			display: block;
		}

		&.-glow {
			inset: 0;
			transform: none;
		}
	}

	&.-dark {
		background: none; /* Coming from body background */

		.supt-section-text-media__inner {
			color: $color-white;
		}
		.supt-section-text-media__content {
			color: $color-white;

			ul li {
				color: $color-white;
			}
		}
	}

	&.-right {
		.supt-section-text-media__media-col {
			@media (min-width: $breakpoint-md) {
				order: 2;
			}
		}

		.supt-section-text-media__media {
			@media (min-width: $breakpoint-md) {
				margin-left: calc(-1 * $grid-gutter-width);
				width: calc(100% + var(--supt-container-padding-inline) + $grid-gutter-width);
			}
			@media (min-width: $grid-container-max-mq) {
				width: calc(
					100% + ((100vw - var(--container-width)) / 2) + var(--supt-container-padding-inline) +
						$grid-gutter-width
				);
			}
		}
	}

	&.-image-right {
		.supt-section-text-media__media img {
			object-position: right;
		}
	}
	&.-image-top {
		.supt-section-text-media__media img {
			object-position: top;
		}
	}
	&.-image-x-70 {
		.supt-section-text-media__media img {
			object-position: 70% 50%;
		}
	}
}