@import '@resources/index.css';

.supt-section-cta {
	&__inner {
		@extend %grid;

		@mixin clamp height, 600, 830, $xxs-breakpoint, $lg-breakpoint;
		@mixin clamp border-radius, 16, 32, $xxs-breakpoint, $lg-breakpoint;

		align-items: center;
		position: relative;

		background-color: $color-pink;
	}

	&__content {
		@extend %grid-no-margin;

		grid-column: 1 / span 12;
		text-align: center;

		margin-top: -45px; /* button's height */
	}

	&__title {
		@extend %t-xxl;
		text-wrap: balance;

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

		/* Safari only */
		@supports (font: -apple-system-body) and (-webkit-appearance: none) {
			text-wrap: unset;
		}
	}

	&__description {
		@extend %t-s-normal;
		color: $color-interface-grey-100;
		text-wrap: balance;

		grid-column: 2 / span 10;

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

	&__button {
		@mixin clamp bottom, 32, 80, $xxs-breakpoint, $lg-breakpoint;
		grid-column: 2 / span 10;
		margin-top: 12px;

		@media screen and (min-width: $sm-breakpoint) {
			position: absolute;
			left: 0;
			width: 100%;
		}
	}

	.supt-card-testimonial-small {
		position: absolute;
		z-index: 2;

		&.-first {
			top: calc(50% - 42px / 2);
			left: calc(50% - 108px / 2);
			@media (min-width: $sm-breakpoint) {
				left: calc(50% - 124px / 2);
			}
		}

		&.-last {
			top: calc(50% - 42px / 2);
			left: calc(50% - 95px / 2);
			@media (min-width: $sm-breakpoint) {
				left: calc(50% - 110px / 2);
			}
		}
	}
}