.pictures {
	display: grid;
	gap: 8px;
	width: 100%;
	overflow: hidden;
}

.pictures__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--border-radius_m);
	background: var(--color-gray-light);
}
.pictures__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pictures__more {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(67, 67, 67, .66);
	color: var(--color-white);
	font-size: 1.5rem;
	font-weight: 600;
	white-space: nowrap;
}

.pictures--1 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	aspect-ratio: 16 / 9;
}
.pictures--2 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	aspect-ratio: 16 / 7;
}
.pictures--3 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	aspect-ratio: 16 / 7;
}
.pictures--3 .pictures__item:nth-child(1) {
	grid-row: 1 / 3;
}
.pictures--4 {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr 1fr;
	aspect-ratio: 16 / 7;
}
.pictures--4 .pictures__item:nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}
.pictures--4 .pictures__item:nth-child(4) {
	grid-column: 3 / 5;
	grid-row: 2 / 3;
}
.pictures--5 {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
	aspect-ratio: 16 / 7;
}
.pictures--5 .pictures__item:nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

@media (max-width: 767px) {
	.pictures {
		gap: 6px;
	}
	.pictures__more {
		font-size: 1rem;
	}
}

@media (max-width: 575px) {
	.pictures__more {
		font-size: .5rem;
	}
}