* {
	box-sizing: border-box;
}

.row_alfr {
	display: flex !important;
	flex-wrap: wrap !important;
	width: 100% !important;
	gap: 8px !important; 
	/* Задаем базовое кол-во колонок. Можно переопределять inline-стилем */
	--columns: 2; 
}

/* Ширина элемента вычисляется динамически:
   100% делим на число колонок и вычитаем суммарный gap с учетом обертки */
.row_alfr > .column {
	display: block !important;
	flex: 0 0 calc((100% / var(--columns)) - ((var(--columns) - 1) * 8px / var(--columns))) !important;
	max-width: calc((100% / var(--columns)) - ((var(--columns) - 1) * 8px / var(--columns))) !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Адаптив для мобильных устройств (опционально) */
@media (max-width: 768px) {
	.row_alfr {
		--columns: 1; /* На телефонах всегда одна колонка */
	}
}

/* Контейнер для соотношения сторон */
.ratio-container {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.gallary_alfr {
	transition: transform 0.5s ease;
	border: 1px solid #1c3765;
	border-radius: 4px;		
}

.ratio-container img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.ratio-container:hover img {
	transform: scale(1.05);
	border-color: transparent;
}

/* При наведении на весь блок */
.ratio-container:hover {
	border-color: transparent; /* Скрываем рамку */
}

/* текст снизу картинки. Под рамкой */
.text-caption {
    margin-top: 8px; /* Отступ от рамки до текста */
    font-size: 15px;
    color: #333;
    line-height: 1.4;
    text-align: center;
	    
    font-style: italic; /* Свойство для курсива */
}	

/* текст снизу картинки. в рамке, выезжает при наведении курсора */
/* Стили для контейнера подписи */
.image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    
    padding: 10px 15px;
    
    background: rgba(0, 0, 0, 0.6); /* Полупрозрачный черный фон */
    color: #fff; /* Белый текст */
    
    font-size: 14px;
    text-align: center;
    
    /* Плавное появление при наведении (опционально) */
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.3s ease;
}

/* Показываем подпись при наведении на контейнер */
.ratio-container:hover .image-caption {
    opacity: 1;
    transform: translateY(0);
}