@import '@resources/index.css';

.supt-section-functions-more {
	position: relative;
	z-index: 2 !important; /* Override z-index from _section.css for all sections */
	min-height: 100vh;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	overflow: hidden;

	&__wrapper {
		width: 100%;
	}

	&__inner {
		@extend %grid;
	}

	&__title,
	&__list {
		grid-column: 1 / span 12;
	}

	&__title {
		@extend %t-sm;
		text-align: center;
	}

	&__list {
		@mixin clamp margin-top, 24, 32, $xxs-breakpoint, $lg-breakpoint;
		@mixin clamp height, 350, 550, $xxs-breakpoint, $lg-breakpoint;

		list-style: none;
		perspective: 1000;
		position: relative;
		transform-style: preserve-3d;
	}

	&__item {
		@extend %t-xl;
		@mixin clamp line-height, 30, 60, $xxs-breakpoint, $lg-breakpoint;
		text-align: center;

		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		transform-origin: center center -170px;
		transform-style: preserve-3d;
		backface-visibility: hidden;

		@media (min-width: $xxs-breakpoint) {
			transform-origin: center center -190px;
		}
		@media (min-width: 480px) {
			transform-origin: center center -210px;
		}
		@media (min-width: $xs-breakpoint) {
			transform-origin: center center -250px;
		}
		@media (min-width: $md-breakpoint) {
			transform-origin: center center -310px;
		}
		@media (min-width: $lg-breakpoint) {
			transform-origin: center center -350px;
		}

		@media (max-width: 400px) {
			font-size: calc(24px + (30 - 24) * ((100vw - 320px) / (400 - 320)));
		}
	}

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

		&.-green {
			top: 50%;
			left: 40%;

			@media (min-width: $md-breakpoint) {
				left: 45%;
			}
		}

		&.-blue {
			top: 55%;
			left: 45%;

			@media (min-width: $md-breakpoint) {
				left: 50%;
			}
		}
	}
}