.PhotoPage {
    columns: 3 250px;
    column-gap: 16px;
    width: 720px;
    margin: 0 auto;
}

.PhotoPage-cont {
    break-inside: avoid;
    margin-bottom: 16px;
    cursor: zoom-in;
}
.PhotoPage-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* Оверлей для зума */
.PhotoPage-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding-top: 110px;
    animation: fadeIn 0.25s ease;
}

    .PhotoPage-overlay img {
        max-width: 90%;
        max-height: 90%;
        border-radius: 8px;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
        animation: zoomIn 0.25s ease;
        cursor: zoom-out;
    }

/* Плавное появление */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 767px) {
    .PhotoPage {
        columns: 1 !important; /* Принудительно 1 колонка */
        width: 100%;
        padding: 0 10px;
    }
}
@media (min-width: 1200px) {
    .PhotoPage {
        columns: 4 250px; /* 4 колонки */
        column-gap: 24px;
        width: 900px;
    }
}
@media (min-width: 1380px) {
    .PhotoPage {
        columns: 4 280px; /* 4 колонки, но шире */
        column-gap: 28px;
        width: 1068px;
    }
}
@media (min-width: 1920px) {
    .PhotoPage {
        columns: 5 300px; /* 5 колонок на Full HD */
        column-gap: 30px;
        width: 1540px;
    }
}