.home-page {
}

/* main-slider */
.main-slider {
	padding-top: 16px;
}
.main-slider__text {
	width: min-content;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.main-slider__text h1 {
	font-weight: var(--fw-700);
	font-size: clamp(30px, 8.8vw, 45px);
	line-height: clamp(28px, 7.8vw, 40px);
	color: var(--neutral-0900);
}
.main-slider__text p {
	font-weight: var(--fw-400);
	font-size: 14px;
	line-height: 20px;
	font-size: clamp(14px, 3.889vw, 20px);
	line-height: min(20px, 5.556vw, 28px);
	color: var(--neutral-0700);
}
.main-slider__controls {
	display: none;
}

/* section */
.homepage-section {
	margin-block: 32px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.homepage-section__title {
	margin-bottom: 8px;
	font-weight: var(--fw-700);
	font-size: 24px;
	line-height: 32px;
	color: var(--neutral-0900);
}

/* categories */
.categories {
	--gap: 6px;

	padding-block: 16px;
	display: grid;
	gap: var(--gap);
}

.categories__row {
	padding-left: max(calc((100vw - var(--container-max-width)) / 2 + var(--container-padding)), var(--container-padding));
	padding-right: var(--container-padding);
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.categories__row-container::-webkit-scrollbar {
	display: none;
}

/* category-card */
.category-card {
	--padding-x: 12px;
	--padding-y: 10px;

	position: relative;
	flex-shrink: 0;
}
.category-card__main {
	height: 94px;
	display: block;
	border-radius: 4px;
	background-color: var(--neutral-0100);
	overflow: hidden;
}
.category-card__heading {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	padding: var(--padding-y) var(--padding-x);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.category-card__title {
	font-weight: var(--fw-500);
	font-size: 14px;
	line-height: 16px;
	color: var(--neutral-0900);
}
.category-card__image {
	height: 100%;
	display: block;
}
.category-card__image img {
	height: 100%;
}

.category-card__buttons {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;

	padding: var(--padding-x) var(--padding-y);
	width: calc(280px + var(--padding-x) * 2);

	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

/* listings */
.listings__list {
	margin-bottom: 8px;
	display: grid;
	gap: 12px;
}


@media (min-width: 768px) {

	/* main-slider */
	.main-slider__text h1 {
		font-size: max(36px, 4.6875vw);
		line-height: max(32px, 3.90625vw);
	}
	.main-slider__text p {
		font-size: max(15px, 1.953125vw);
		line-height: max(22px, 2.86458vw);
	}


	/* categories */
	.categories {
		--gap: 12px;
	}

	.category-card {
		--padding-x: 20px;
		--padding-y: 20px;
	}
	.category-card__main {
		height: 188px;
	}
	.category-card__title {
		font-weight: var(--fw-500);
		font-size: 24px;
		line-height: 1;
		color: var(--neutral-0900);
	}

	/* listings */
	.listings__list {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 1139.98px) {
	.category-card__main:active {
		background-color: var(--neutral-0150);
	}
	.category-card__description,
	.category-card__buttons {
		display: none;
	}
	.category-card__title {
		width: min-content;
	}
}

@media (min-width: 1140px) {

	/* main-slider */
	.main-slider {
		position: relative;
	}
	.main-slider__main::before,
	.main-slider__main::after {
		content: '';
		position: absolute;
		right: calc(50vw + var(--container-max-width) / 2);
		width: 540px;
		height: 100%;
		background: linear-gradient(90deg, var(--neutral-0000) 50%, transparent 100%);
		z-index: 1;
	}
	.main-slider__main::after {
		right: auto;
		left: calc(50vw + var(--container-max-width) / 2);
		transform: rotate(180deg);
	}
	.main-slider__slide {
		transition: opacity 240ms ease-in-out;
	}
	.main-slider__slide._hide {
		opacity: 0;
	}

	.main-slider__text {
		top: 46px;
		left: 32px;
		transform: none;
	}
	.main-slider__text h1 {
		font-size: 42px;
		line-height: 38px;
	}
	.main-slider__text p {
		font-size: 16px;
		line-height: 24px;
	}

	.main-slider__controls {
		position: absolute;
		top: calc(50% + 8px);
		left: 50%;
		transform: translate(-50%, -50%);

		display: flex;
		pointer-events: none;
	}
	.main-slider__controls ._left {
		transform: translateX(-50%);
	}
	.main-slider__controls ._right {
		transform: translateX(50%);
	}

	/* section */
	.homepage-section {
		margin-block: 40px;
		gap: 8px;
	}
	.homepage-section__title {
		font-size: 32px;
	}

	/* categories */
	.categories {
		margin-inline: auto;
		padding-inline: var(--container-padding);
		width: var(--container-max-width);
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 264px;
	}
	.categories__row {
		display: contents;
	}

	/* category-card */
	.category-card {
		grid-column: span 2;
	}
	.category-card._single {
		grid-column: span 1;
	}
	.category-card._vertical {
		grid-column: span 1;
		grid-row: span 2;
	}
	.category-card._vertical .category-card__buttons {
		width: auto;
		bottom: 200px;
	}
	.category-card._order-1 {
		order: 1;
	}
	.category-card._order-2 {
		order: 2;
	}
	.category-card._order-3 {
		order: 3;
	}

	.category-card__main {
		--bg-gradient-color: var(--neutral-0100);

		height: 100%;
		background:
			linear-gradient(var(--neutral-0100), var(--neutral-0100)) padding-box,
			linear-gradient(180deg, var(--neutral-0100), var(--bg-gradient-color)) border-box;
		border: 1px solid transparent;
		transition: all 60ms cubic-bezier(0.5, 0, 1, 1);
	}
	.category-card__main:hover {
		--bg-gradient-color: var(--neutral-0200);

		box-shadow:
			0px 16px 24px -16px rgba(0, 0, 0, 0.08),
			inset 0px -24px 32px -32px var(--neutral-0200),
			inset 0px 24px 48px -32px var(--neutral-0000);
	}
	.category-card__heading {
		width: calc(240px + var(--padding-x) * 2);
	}
	.category-card__description {
		font-weight: var(--fw-400);
		font-size: 14px;
		line-height: 20px;
		color: var(--neutral-0700);
	}

	.tenders-group {
		position: relative;
		display: flex;
		gap: 24px;
	}
	.tenders {
		width: 712px;
	}

	/* listings */
	.listings {
		position: absolute;
		right: var(--container-padding);
		top: 0;
		bottom: 0;
		width: 356px;
		overflow: hidden;
	}
	.listings::after {
		content: '';
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 92px;
		background: linear-gradient(180deg, transparent 0%, var(--neutral-0000) 50%);
		pointer-events: none;
	}
	.listings__list {
		grid-template-columns: 1fr;
	}
	.listings__title {
		margin-block: 10px 6px;
		font-weight: var(--fw-500);
		font-size: 16px;
		line-height: 24px;
		color: var(--neutral-0600);
	}
	.listings__button {
		position: absolute;
		bottom: 0;
		width: 100%;
		z-index: 1;
	}
}