body.page .entry-content .vs-gallery {
	max-width: 1350px !important;
}


.vs-popup-gallery-list {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	transition: opacity .3s ease-in-out;
	align-items: stretch;
}

.vs-popup-gallery-item {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: #F5F1EE;
	min-height: 300px;
	flex: 0 1 calc((100% - 30px) / 3);
	cursor: pointer;
}

.vs-popup-gallery-item img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vs-popup-gallery-content {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	padding: 10px;
	background: linear-gradient(0deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
}

.vs-popup-gallery-title,
.vs-popup-gallery-country {
	color: #ffffff;
	margin-bottom: 10px;
	line-height: 1.2;
}

.vs-popup-gallery-country {
	font-size: 14px;
}

.vs-popup-gallery-list .vs-accommodation-item-tags-list {
	left: 15px;
}

.vs-popup-gallery {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .75);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	padding: 20px; /* Добавим отступы на случай очень маленьких экранов */
	box-sizing: border-box;
}

.vs-popup-gallery-close {
	position: absolute;
	top: 50px;
	right: 20px;
	z-index: 10;
	padding: 10px !important;
}

.vs-popup-gallery-container {
	/* --- ОСНОВНЫЕ ИЗМЕНЕНИЯ ЗДЕСЬ --- */
	position: relative; /* 1. Делаем контейнер точкой отсчета для дочерних элементов */
	display: flex; /* Используем flexbox для центрирования слайдера */
	align-items: center;
	justify-content: center;

	/* 2. Задаем более гибкие размеры */
	width: 90vw; /* Ширина 90% от ширины экрана */
	height: 90vh; /* Высота 90% от высоты экрана */
	max-width: 1200px; /* Но не больше 1200px */
	max-height: 800px; /* И не выше 800px */

	overflow: hidden; /* Это свойство остается важным */
	color: #ffffff;
}

/* 3. Заставляем слайдер и его внутренности занимать 100% родителя */
.vs-popup-gallery .slider,
.vs-popup-gallery .slick-list,
.vs-popup-gallery .slick-track {
	width: 100%;
	height: 100%;
}

.vs-popup-gallery .slick-track {
	align-items: center !important;
}

/* 4. Стили для самих слайдов и изображений */
.vs-popup-gallery .slick-slide {
	display: flex !important; /* Используем !important, чтобы перебить стили slick */
	align-items: center;
	justify-content: center;
	height: 100%;
}

.vs-popup-gallery .slick-slide img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain; /* Гарантирует, что изображение впишется без искажений */
}

/* Стили для стрелок остаются, но мы их немного улучшим */
.vs-popup-gallery .slick-arrow {
	z-index: 5; /* Ставим стрелки над слайдами */
	width: 50px;
	height: 50px;
}

.vs-popup-gallery .slick-prev {
	left: 25px; /* Сдвигаем ближе к краю */
}

.vs-popup-gallery .slick-next {
	right: 25px; /* Сдвигаем ближе к краю */
}

/* Убираем стандартный цвет текста у стрелок, если он мешает */
.vs-popup-gallery .slick-arrow::before {
	color: #ffffff;
}

@media (max-width: 992px) {
	.vs-popup-gallery-item {
		flex: 0 1 calc((100% - 15px) / 2);
	}
}

@media (max-width: 640px) {
	.vs-popup-gallery-item {
		flex: 0 1 100%;
	}
}