@import '@resources/index.css';

.supt-section-media {
	&__inner {
		@extend %grid;
		grid-row-gap: 40px;
	}

	&__headline {
		grid-column: 1 / span 12;

		@media screen and (min-width: $sm-breakpoint) {
			grid-column: 3 / span 8;
		}

		.supt-section__title {
			@extend %t-ml;
			text-align: center;
			margin: 0;
		}
	}

	&__content {
		grid-column: 1 / span 12;

		@media screen and (min-width: $sm-breakpoint) {
			grid-column: 2 / span 10;
		}

		@media screen and (min-width: $ml-breakpoint) {
			grid-column: 3 / span 8;
		}

		img {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 16 / 9;
			object-fit: cover;
			border-radius: 14px;
			overflow: hidden;
		}

		.supt-figure__figcaption,
		.supt-video__caption {
			@extend %t-s-normal;
			color: $color-interface-grey-80;
			margin-top: 16px;
		}

		.supt-video.-is-playing {
			.supt-video__player {
				animation: fade-in 0.3s cubic-bezier(1, -0.02, 0.5, 1.03);
			}
		}

		.supt-video__inner {
			height: 100%;
		}
	}
}