@import '@resources/index.css';

.supt-section-advantages {
	background-color: $color-interface-grey-20;

	@media (orientation: portrait) {
		margin-top: calc(-1 * (75svh - 125vw + (0.7 * 75svh)) + 40px);

		/* &::before {
			content: "";
			position: absolute;
			bottom: 100%;
			left: 0;
			width: 100%;
			height: 15svh;
			background-color: $color-interface-grey-20;
		} */
	}

	&__inner {
		@extend %grid;
	}

	&__title {
		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;
		}
	}

	&__content {
		@mixin clamp gap, 40, 80, $xxs-breakpoint, $lg-breakpoint;

		grid-column: 1 / span 12;
		margin-top: 40px;
		display: flex;
		flex-direction: column;

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

	.supt-card-big {
		position: sticky;
		top: var(--card-big-offset-top, 30vh);

		&:nth-child(1) {
			.supt-card-big__image video {
				margin-top: auto;
			}

			.supt-card-big__head {
				border-color: rgba(255 255 255 / 60%);

				&__shape__border {
					fill: rgba(255 255 255 / 60%);
				}
			}

			.supt-card-big__inner {
				border-color: rgba(255 255 255 / 60%);
			}
		}

		&:nth-child(2) {
			.supt-card-big__head {
				border-color: rgba(255 255 255 / 80%);

				&__shape__border {
					fill: rgba(255 255 255 / 80%);
				}
			}

			.supt-card-big__inner {
				border-color: rgba(255 255 255 / 80%);
			}
		}
	}

	.supt-progress-bar {
		@mixin clamp margin-bottom, 67.5, 260, $xxs-breakpoint, $lg-breakpoint;

		grid-column: 1 / span 1;
		align-self: baseline;
		position: sticky;
		top: 50%;

		display: none;

		@media (min-width: $sm-breakpoint) {
			display: flex;
			/* transform: translateY(50%); */
		}

		@media (max-width: calc($md-breakpoint - 1px)) {
			margin-bottom: calc((620 - 40) / 2px) !important;
		}
		@media (max-width: calc($sm-breakpoint - 1px)) {
			margin-bottom: 0 !important;
		}
	}
}