@import '@resources/index.css';

.supt-section-testimonials {
	z-index: 2 !important;

	&__inner {
		@extend %grid;
		@mixin clamp grid-row-gap, 40, 80, $xxs-breakpoint, $lg-breakpoint;
	}

	.supt-section__title {
		grid-column: 1 / span 12;

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

	&__testimonials,
	.block-editor-block-list__layout {
		@extend %grid-no-margin;

		grid-column: 1 / span 12;
		align-items: start;
		position: relative;

		margin-top: 30px;

		@media (min-width: $md-breakpoint) {
			grid-row-gap: 0;
			margin-top: 0;
		}
	}

	&__testimonial,
	.block-editor-block-list__block {
		grid-column-end: span 10;

		@media (min-width: $sm-breakpoint) {
			grid-column-end: span 5;
		}
		@media (min-width: $md-breakpoint) {
			grid-column-end: span 4;
		}
		@media (min-width: $ml-breakpoint) {
			grid-column-end: span 3;
		}

		&:nth-child(7n + 1) {
			grid-column-start: 1;
			transform: translateY(-30px);

			@media (min-width: $sm-breakpoint) {
				transform: translateY(80px);
			}
			@media (min-width: $md-breakpoint) {
				grid-column-start: 2;
			}
		}

		&:nth-child(7n + 2) {
			grid-column-start: 3;

			@media (min-width: $sm-breakpoint) {
				grid-column-start: 7;
			}
		}

		&:nth-child(7n + 3) {
			grid-column-start: 1;
			z-index: 1;
			transform: translateY(-28px);

			@media (min-width: $sm-breakpoint) {
				grid-column-start: 2;
				transform: translateY(35px);
			}
			@media (min-width: $md-breakpoint) {
				grid-column-start: 4;
				transform: translateY(50px);
			}
			@media (min-width: $ml-breakpoint) {
				transform: translateY(75px);
			}
		}

		&:nth-child(7n + 4) {
			grid-column-start: 2;
			margin-top: 40px;

			@media (min-width: $sm-breakpoint) {
				grid-column-start: 8;

				margin-top: 0px;
				transform: translateY(-50px);
			}
			@media (min-width: $md-breakpoint) {
				grid-column-start: 9;
			}
		}

		&:nth-child(7n + 5) {
			grid-column-start: 3;
			z-index: 1;
			transform: translateY(-32px);

			@media (min-width: $sm-breakpoint) {
				grid-column-start: 1;
				transform: translateY(0px);
			}
			@media (min-width: $md-breakpoint) {
				grid-column-start: 2;
			}
		}

		&:nth-child(7n + 6) {
			grid-column-start: 1;
			margin-top: 37px;

			@media (min-width: $sm-breakpoint) {
				grid-column-start: 7;
				margin-top: 0px;
				transform: translateY(-80px);
			}
			@media (min-width: $md-breakpoint) {
				grid-column-start: 8;
			}
		}

		&:nth-child(7n + 7) {
			grid-column-start: 2;
			margin-top: 20px;

			@media (min-width: $sm-breakpoint) {
				grid-column-start: 8;
				margin-top: 0px;
				transform: translateY(-20px);
			}
			@media (min-width: $md-breakpoint) {
				grid-column-start: 6;
			}
		}
	}
}