/* Базовые стили для всех браузеров */
.image_grid {
	margin-top: 40px;
	margin-bottom: 20px;
	font-size: 0; /* Убираем пробелы между inline-block элементами */
	text-align: center; /* Выравнивание по центру для старых браузеров */
}
.image_grid a {
	border: none;
	cursor: zoom-in;
}
.image_grid a:hover {
	border: none;
	-webkit-animation: none;
	-moz-animation: none;
	animation: none;
	-ms-animation: none;
	-o-animation: none;
}

.image_row {
	text-align: center; /* Центрируем inline-block элементы */
}

.image_item {
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	border-radius: 4px;
	position: relative;
	width: 200px;
	height: 150px;
	margin: 1.5px; /* Fallback для gap */
}

.fixed_row {
	text-align: center;
}

.fixed_row .image_item {
	display: inline-block;
}

/* Для случаев, когда fixed_row содержит только один image_item */
.fixed_row:has(.image_item:only-child) .image_item {
    width: 100% !important;
    height: auto !important;
}

.image_item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
	transform-origin: center;
	transform: scale(1.01);
}

.image_item:hover img {
	transform: scale(1.03);
}

/* Стили для современных браузеров с поддержкой flex и gap */
@supports (display: flex) and (gap: 3px) {
	.image_grid {
		display: flex;
		flex-direction: column;
		gap: 3px;
		font-size: initial; /* Восстанавливаем стандартный размер шрифта */
		text-align: initial; /* Убираем text-align для flex */
		align-items: center; /* Центрируем flex-элементы по горизонтали */
	}

	.image_row {
		display: flex;
		gap: 3px;
		justify-content: center; /* Центрируем элементы в строке */
		text-align: initial; /* Убираем text-align для flex */
	}

	.image_item {
		display: block;
		margin: 0; /* Убираем fallback margin когда есть gap */
		flex-shrink: 0;
	}

	.fixed_row {
		display: flex;
		gap: 3px;
		width: 100%;
		/* text-align: initial; */
		text-align: center;
		font-style: italic;
		justify-content: center; /* Центрируем фиксированные строки */
	}

	.fixed_row .image_item {
		display: block;
		flex-shrink: 0;
	}
}

/* Дополнительный fallback для очень старых браузеров без object-fit */
@supports not (object-fit: cover) {
	.image_item {
		text-align: center; /* Центрируем изображение внутри контейнера */
	}
	
	.image_item img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
		margin: 0 auto;
		position: relative;
		top: 50%;
		transform: translateY(-50%); /* Вертикальное центрирование */
	}
	
	/* Отключаем hover-трансформацию если нет object-fit */
	.image_item:hover img {
		transform: translateY(-50%) scale(1.03); /* Комбинируем трансформации */
	}
}

/* Для браузеров с object-fit но без flex - центрируем обычным способом */
@supports (object-fit: cover) and not (display: flex) {
	.image_item img {
		object-position: center; /* Центрируем обрезанное изображение */
	}
}