@import '@resources/index.css';

.supt-section-legal-text {
	background-color: $color-interface-grey-20;
	margin-top: -45px;

	&__inner {
		@extend %grid;
		grid-row-gap: 16px;
		@media (min-width: $sm-breakpoint) {
			grid-row-gap: 20px;
		}
		@media (min-width: $md-breakpoint) {
			grid-row-gap: 24px;
		}
	}

	.supt-section__title {
		@extend %t-xl;
		@mixin clamp font-size, 30, 60, $xxs-breakpoint, $lg-breakpoint;
		@mixin clamp line-height, 42, 80, $xxs-breakpoint, $lg-breakpoint;

		grid-column: 1 / span 12;

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

	.supt-section__introduction {
		@extend %t-sm-normal;
	}

	.supt-section__introduction,
	&__content {
		grid-column: 1 / span 12;
		@media (min-width: $xs-breakpoint) {
			grid-column: 2 / span 10;
		}
		@media (min-width: $md-breakpoint) {
			grid-column: 3 / span 8;
		}
		@media (min-width: $ml-breakpoint) {
			grid-column: 4 / span 6;
		}
	}

	.supt-section__title,
	.supt-section__introduction {
		text-align: center;
	}

	&__content {
		@extend %text-formatting;

		@mixin clamp padding-top, 32, 64, $xxs-breakpoint, $lg-breakpoint;
		@mixin clamp padding-bottom, 32, 64, $xxs-breakpoint, $lg-breakpoint;
		@mixin clamp padding-left, 24, 67, $xxs-breakpoint, $lg-breakpoint;
		@mixin clamp padding-right, 24, 67, $xxs-breakpoint, $lg-breakpoint;

		@mixin clamp margin-top, 24, 56, $xxs-breakpoint, $lg-breakpoint;

		border-radius: 32px;
		background-color: $color-white;
	}
}