/* Внешний контейнер для коллажа */
.collage-container {
    display: grid;
    gap: 2px; /* Расстояние между изображениями */
    width: 85%; /* Ширина контейнера с отступами */
    max-height: 300px; /* Максимальная высота контейнера */
    margin: 0 auto;
    border-radius: 8px; /* Закругляем только внешний контейнер */
    overflow: hidden;
}

/* Стили для изображений */
.collage-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Изображения занимают всё пространство без искажений */
    filter: contrast(125%);
}

/* Разметка для 1 изображения */
.collage-container:has(img:nth-child(1)):not(:has(img:nth-child(2))) {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

/* Разметка для 2 изображений */
.collage-container:has(img:nth-child(2)):not(:has(img:nth-child(3))) {
    grid-template-columns: 1fr 1fr; /* Две колонки */
    grid-template-rows: 1fr; /* Одна строка */
}

/* Разметка для 3 изображений: 2 сверху, 1 внизу */
.collage-container:has(img:nth-child(3)):not(:has(img:nth-child(4))) {
    grid-template-columns: 1fr 1fr; /* Две колонки */
    grid-template-rows: 1fr 1fr; /* Две строки */
}

.collage-container:has(img:nth-child(3)):not(:has(img:nth-child(4))) img:nth-child(3) {
    grid-column: 1 / span 2; /* Нижнее изображение на всю ширину */
}

/* Разметка для 4 изображений: ровная сетка 2x2 */
.collage-container:has(img:nth-child(4)):not(:has(img:nth-child(5))) {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* Разметка для 5 изображений: 2 сверху, 1 в центре, 2 внизу */
.collage-container:has(img:nth-child(5)) {
    grid-template-columns: 1fr 1fr; /* Две колонки */
    grid-template-rows: 1fr 1fr 1fr; /* Три строки */
}

.collage-container:has(img:nth-child(5)) img:nth-child(3) {
    grid-column: 1 / span 2; /* Центральное изображение на всю ширину */
}

.collage-container:has(img:nth-child(5)) img:nth-child(4),
.collage-container:has(img:nth-child(5)) img:nth-child(5) {
    grid-row: 3; /* Последние два изображения в третьей строке */
}

.collage-img-safari-2-row {
    height:150px;
}

.collage-img-safari-3-row {
    height:100px;
}