/**
 * Зона [front] — главная и её макеты (inc/flex-front.php): поправки к style.css вёрстки для сочетаний секций,
 * которых в вёрстке нет. Данные главной из вёрстки выглядят как раньше.
 */

/* «Белый фон страницы» на главной: <main class="main bg-white"> стоит сразу после первого экрана (.intro — до <main>),
   и правило вёрстки section:not(.bg-white) + .bg-white (белая секция после серой) давало белую полосу под слайдером. */
.intro + .main.bg-white {
	padding-top: 0;
	margin-top: 0;
}

/* «Клиенты» (макет clients): плашка наезжает на низ тёмных «Проектов» (style.css: .clients__box margin-top -20rem,
   ≤768 — -14rem) только сразу после них, как в вёрстке главной. В другом месте наезд закрыл бы низ соседней секции —
   там секция стоит отдельно, с обычным отступом сверху. */
.clients {
	padding-top: var(--section-margin);
}

.clients .clients__box {
	margin-top: 0;
}

.projects + .clients {
	padding-top: 0;
}

.projects + .clients .clients__box {
	margin-top: -20rem;
}

@media (max-width: 768px) {
	.projects + .clients .clients__box {
		margin-top: -14rem;
	}
}

.intro__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.intro__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.intro__slide::before {
	z-index: 1;
}

@media (max-width: 768px) {
	.header::before {
		bottom: 0;
	}

	.intro__slide.swiper-slide {
		align-items: stretch;
		min-height: calc(100vw * 852 / 768);
	}

	.intro__slide--tablet .intro__bg img {
		object-position: center bottom;
	}

	.intro__slide--tablet::before {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 50%);
	}

	.intro__wrapper {
		display: grid;
		grid-template-columns: auto 1fr;
		align-content: start;
		align-items: start;
		padding: 13rem 0 9rem;
	}

	.intro__content {
		display: contents;
	}

	.intro__label,
	.intro__title,
	.intro__text {
		grid-column: 1 / -1;
		justify-self: start;
	}

	.intro__label {
		padding: 0.9rem 3.1rem;
		font-size: 1.25rem;
	}

	.intro__title {
		font-size: 3.4rem;
	}

	.intro__title:first-child {
		margin-top: 4.6rem;
	}

	.intro__text {
		margin-bottom: 2.4rem;
		font-size: 1.7rem;
	}

	.intro__button {
		grid-column: 1;
		min-width: 30rem;
		min-height: 5.2rem;
		font-size: 1.4rem;
	}

	.intro__note {
		display: flex;
		grid-column: 2;
		justify-self: end;
		margin: 0 1.4rem 0 2rem;
		font-size: 1.2rem;
	}

	.intro__bottom {
		bottom: 2.4rem;
	}

	.intro__nav {
		justify-content: center;
	}

	.intro__nav .slider-arrow {
		width: 3rem;
		height: 3rem;
	}

	.intro__bullet {
		width: 1.4rem;
	}
}

@media (max-width: 480px) {
	.intro__slide.swiper-slide {
		min-height: calc(100vw * 664 / 320);
	}

	.intro__slide--mobile .intro__bg img {
		object-position: center bottom;
	}

	.intro__slide--mobile::before {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 50%);
	}

	.intro__wrapper {
		grid-template-columns: 100%;
		padding: 16.4rem 0 12rem;
	}

	.intro__label {
		padding: 0.75rem 2.4rem;
		font-size: 1.25rem;
	}

	.intro__title {
		font-size: 2.8rem;
	}

	.intro__title:first-child {
		margin-top: 5.4rem;
	}

	.intro__text {
		margin-bottom: 3.4rem;
		font-size: 1.7rem;
		line-height: 1.55;
	}

	.intro__button {
		grid-column: 1 / -1;
		min-height: 6rem;
		padding-inline: 1.5rem;
		font-size: 1.6rem;
	}

	.intro__note {
		grid-column: auto;
		position: absolute;
		right: 4.4rem;
		bottom: 6.9rem;
		margin: 0;
		white-space: nowrap;
	}

	.intro__bottom {
		bottom: 1.8rem;
	}

	.intro__nav .slider-arrow {
		width: 4.2rem;
		height: 4.2rem;
	}

	.intro__bullet {
		width: 1.8rem;
	}
}