/* Start:/local/templates/air/components/bitrix/catalog/ugspets/style.css?169227332185*/
.elements__wrapper {
	display: grid;
	width: 100%;
	grid-template-columns: 30% 70%;
}
/* End */


/* Start:/local/templates/air/components/bitrix/catalog/ugspets/bitrix/catalog.section.list/.default/style.css?16922733212061*/
.sections__wrapper {
	display: grid;
	grid-template: repeat(4, 1fr) / repeat(4, 1fr);
	grid-template-areas:
	"one three four four"
	"two three five six"
	"seven seven ten twelve"
	"eight nine eleven twelve";
	grid-gap: 10px;
}

.section__item:nth-child(1) {
	grid-area: one;
}
.section__item:nth-child(2) {
	grid-area: two;
}
.section__item:nth-child(3) {
	grid-area: three;
}
.section__item:nth-child(4) {
	grid-area: four;
}
.section__item:nth-child(5) {
	grid-area: five;
}
.section__item:nth-child(6) {
	grid-area: six;
}
.section__item:nth-child(7) {
	grid-area: seven;
}
.section__item:nth-child(8) {
	grid-area: eight;
}
.section__item:nth-child(9) {
	grid-area: nine;
}
.section__item:nth-child(10) {
	grid-area: ten;
}
.section__item:nth-child(11) {
	grid-area: eleven;
}
.section__item:nth-child(12) {
	grid-area: twelve;
}

.section__item {
	transition: filter .2s ease-in-out;
}

.sections__wrapper:hover .section__item {
	-webkit-filter: grayscale(100%);  
  filter: grayscale(100%);
}

.sections__wrapper:hover .section__item:hover {
	-webkit-filter: grayscale(0%);  
  filter: grayscale(0%);
}

.item__wrapper {
	height: 100%;
	width: 100%;
	position: relative;
}

.item__image {
	height: 100%;
	width: 100%;
}

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

.item__title {
	position: absolute;
	bottom: 10px;
	left: 10px;
	text-decoration: none;
	color: #fff;
	z-index: 3;
}

.item__background {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: linear-gradient(to top, #000 0%, transparent 31%);
}

.underlist__wrapper {
	margin: 50px 0;
}
.underlist__title {
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.underlist__text {
	line-height: 18px;
	width: 75%;
}

@media (max-width: 610px) {
	.sections__wrapper {
		grid-template: repeat(8, 1fr) / repeat(2, 1fr);
		grid-template-areas:
		"one three"
		"two three"
		"four four"
		"five six"
		"seven nine"
		"eight nine"
		"ten ten"
		"eleven twelve";
	}

	.underlist__text {
		width: 100%;
	}
}
/* End */
/* /local/templates/air/components/bitrix/catalog/ugspets/style.css?169227332185 */
/* /local/templates/air/components/bitrix/catalog/ugspets/bitrix/catalog.section.list/.default/style.css?16922733212061 */