/* ///////////////////// */
/* Hero (start)          */
/* ///////////////////// */
.index-page .hero {
	padding-bottom: 30px;
}

.index-page .categories {
	margin-top: 60px;
}

/* ///////////////////// */
/* Hero (end)            */
/* ///////////////////// */


/* ///////////////////// */
/* About (start)         */
/* ///////////////////// */
.about__top {
	display: grid;
	grid-template-columns: 0.92fr 1.08fr;
	gap: 28px;
	align-items: stretch;
	margin-bottom: 75px;
}

.about__brand {
	min-height: 360px;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.about__brand-placeholder {
	width: 100%;
	height: 100%;
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.about__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.about__header {
	margin-bottom: 40px;
}

.about__title {
	font-weight: 500;
	font-size: 50px;
	line-height: 1.08;
	color: var(--white);
}

.about__lead {
	font-size: 36px;
	line-height: 1.4;
	font-weight: 400;
	color: var(--white);
}

.about__lead .font-italic {
	font-size: 42px;
}

.about__text {
	margin-bottom: 75px;
}

.about__paragraph {
	font-size: 20px;
	line-height: 1.2;
	color: var(--white);
}

.about__paragraph + .about__paragraph {
	margin-top: 30px;
}

.about .stats-grid {}
.about .stat {}
.about .stat-value {}
.about .stat-label {}
/* ///////////////////// */
/* About (end)           */
/* ///////////////////// */


/* ///////////////////// */
/* Catalog (start)       */
/* ///////////////////// */
.catalog__header {
	width: 65%;
	margin-bottom: 40px;
}

.catalog__title {
	margin-bottom: 40px;
	font-weight: 500;
	font-size: 50px;
	line-height: 1.08;
	color: var(--white);
}

.catalog__title span {
	font-size: 62px;
}

.catalog__text {
	font-size: 24px;
	line-height: 1.2;
	color: var(--white);
}

.catalog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.catalog__card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.catalog__card-media {
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--media-card-bg);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	overflow: hidden;
	flex: 4 1 500px;
}

.catalog__card-image {
	transform: scale(0.8) translateZ(0);
	transition: transform 0.2s ease, filter 0.2s ease;
}

.catalog__card-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 0 200px;
	padding: 18px 18px 20px;
	background-color: var(--white-a15);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	transition: background-color 0.2s ease;
}

.catalog__card-title {
	font-weight: 500;
	font-size: 24px;
	line-height: 1;
	color: var(--white);
}

.catalog__card-text {
	margin-top: 10px;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.2;
	color: var(--white);
}

.catalog__card:hover .catalog__card-image {
	transform: scale(0.85) translateZ(0);
}

.catalog__card:hover .catalog__card-body {
	background-color: var(--white-a30);
}

.catalog__grid:has(.catalog__card:hover) .catalog__card:not(:hover) .catalog__card-image {
	filter: grayscale(1);
}

.catalog__actions {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.catalog__button {
	width: max-content;
}
/* ///////////////////// */
/* Catalog (end)         */
/* ///////////////////// */


/* ///////////////////// */
/* Lead (start)          */
/* ///////////////////// */
.lead__title {
	font-weight: 500;
	font-size: 50px;
	line-height: 1.08;
	color: var(--white);
}

.lead__text {
	margin-top: 14px;
	font-size: 50px;
	line-height: 1.35;
	color: var(--white);
}

.lead__text span {
	font-size: 62px;
}

/* ///////////////////// */
/* Lead (end)            */
/* ///////////////////// */


/* ///////////////////// */
/* Blog (start)          */
/* ///////////////////// */
.blog__header {
	margin-bottom: 40px;
}

.blog__title {
	margin-bottom: 40px;
	font-weight: 500;
	font-size: 50px;
	line-height: 1.08;
	color: var(--white);
}

.blog__text {
	font-size: 20px;
	line-height: 1.3;
	color: var(--text-muted);
}

.blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}


/* ///////////////////// */
/* Blog (end)            */
/* ///////////////////// */




/* ///////////////////// */
/* Responsive (start)    */
/* ///////////////////// */
@media (max-width: 1200px) {
	:root {
		--pad-x-cont: 32px;
	}
}

@media (max-width: 992px) {
	:root {
		--section-space: 44px;
	}

	.about__top,
	.lead__grid,
	.stores__grid,
	.contacts__grid {
		grid-template-columns: 1fr;
	}

	.about__stats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.catalog__grid,
	.blog__grid,
	.footer__container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.stores__map,
	.contacts__card--map,
	.contacts__map-placeholder {
		min-height: 260px;
	}

	.lead__content,
	.stores__content,
	.catalog__header {
		max-width: none;
		width: 100%;
	}
}

@media (max-width: 768px) {
	:root {
		--pad-x-cont: 20px;
	}

	.header__container {
		min-height: 78px;
		grid-template-columns: 1fr;
		grid-template-areas:
			"logo"
			"catalog"
			"search"
			"phone"
			"actions"
			"nav";
	}

	.hero {
		padding-top: 92px;
	}

	.header__nav {
		flex-wrap: wrap;
		gap: 20px;
		justify-content: flex-start;
	}

	.about__title,
	.catalog__title,
	.lead__title,
	.blog__title,
	.contacts__title {
		font-size: 30px;
	}

	.catalog__title span {
		font-size: 36px;
	}

	.about__lead {
		font-size: 18px;
	}

	.about__lead .font-italic {
		font-size: 22px;
	}

	.lead__text {
		font-size: 20px;
	}

	.lead__text span {
		font-size: 28px;
	}

	.catalog__text,
	.blog__text {
		font-size: 18px;
	}
}

@media (max-width: 640px) {
	.about__stats-grid,
	.catalog__grid,
	.blog__grid,
	.footer__container {
		grid-template-columns: 1fr;
	}

	.catalog__card-media {
		min-height: 240px;
	}

	.footer__container {
		gap: 24px;
	}
}
/* ///////////////////// */
/* Responsive (end)      */
/* ///////////////////// */