.containers-list {
	position: relative;
	margin: 0 calc(var(--page-horizontal-padding) * -1);
}

.containers-list__container {
	display: flex;
	gap: 8px;
	padding: 0 var(--page-horizontal-padding);
	overflow-x: auto;
}

.container-item {
	white-space: nowrap;
	padding: 8px 21px;
	background: #fff;
	border-radius: 20px;
	color: var(--main-color);
	font-size: 13px;
	line-height: 14px;
}

.container-item.active {
	background: #FFB5D3;
}

.catalog-page {
	margin-top: 16px;
	display: grid;
	max-width: 100%;
	grid-template-columns: 411px auto;
	grid-template-rows: auto;
	gap: 16px;
	grid-template-areas:
			"filters items";
}

@media (max-width: 1833px) {
	.catalog-page {
		grid-template-rows: auto auto;
		grid-template-columns: auto;
		grid-template-areas: 	"filters" 
								"items";
		align-items: start;
	}
	
}

.catalog-page__items-block,
.catalog-page__filters {
	border-radius: 20px;
	background: #fff;
	padding: 50px 60px;
	align-self: start;
}


/** region Filters */
.catalog-page__filters {
	grid-area: filters;
}

.catalog-filter__container {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 50px;
}


.filter-section {
	border: none;
	padding: 0;
	flex: 1 1 400px;
	margin-top: 24px;
}

.filter-section .text-input {
	width: 100%;
}

.filter-section__legend {
	position: relative;
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 16px;
}

.filter-section__legend:before {
	content: "";
	position: absolute;
	right: 100%;
	bottom: 0;
	width: 48px;
	height: 48px;
}

@media (max-width: 1833px) {
	.filter-section__legend {
		padding-left: 48px;
	}
	.filter-section__legend:before {
		right: auto;
		left: 0;
	}
}
.filter-section__legend_ingr:before {
	background: url("../images/check.svg") no-repeat center;
}
.filter-section__legend_except:before {
	background: url("../images/except.svg") no-repeat center;
}
.filter-section__legend_name:before {
	background: url("../images/ellipse-pink.svg") no-repeat center;
}

.filter-section__container {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.filter-criterion_checkbox {
	border-radius: 20px;
	background-color: #eee;
	padding: 8px 16px;
	line-height: 14px;
	font-size: 13px;
	cursor: pointer;
}
.filter-criterion_checkbox input[type="checkbox"] {
	display: none;
}
.filter-criterion_checkbox_ingr:has(input[type="checkbox"]:checked) {
	background-color: #3c9;
	color: #fff;
}

.filter-section .text-input {
	padding: 8px 16px;
}

.filter-criterion_checkbox_except:has(input[type="checkbox"]:checked) {
	background-color: #6CA9FF;
	color: #fff;
}

/** endregion Filters */

/** region Items */
.catalog-page__items-block {
	grid-area: items;
}
@media (max-width: 1341px) {
	.catalog-page__filters,
	.catalog-page__items-block {
		padding: 32px;
	}
}
@media (max-width: 767px) {
	.catalog-page__filters,
	.catalog-page__items-block {
		padding: 24px 12px;
	}
}

@media (max-width: 359px) {
	.catalog-page__filters,
	.catalog-page__items-block {
		padding: 24px;
	}
}