.ck-gallery .ck-centered {
    max-width: 780px;
}

.ck-gallery-grid {
    --gallery-columns: 4;
    column-count: var(--gallery-columns);
    column-gap: 1rem;
}
.ck-gallery-grid.ck-gallery-masonry {
    position: relative;
    column-count: auto;
}

.ck-gallery-masonry > .ck-gallery-photo {
    position: absolute;
    margin: 0;
}

.ck-public .ck-gallery {
    padding-top: 36px;
}

.ck-gallery-photo {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0 0 1rem;
    break-inside: avoid;
    vertical-align: top;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    cursor: zoom-in;
    background: #e8eeeb;
    color: white;
    aspect-ratio: 4 / 5;
    max-height: 420px;
}

.ck-gallery-photo:nth-child(3n + 2) {
    aspect-ratio: 4 / 3;
}

.ck-gallery-photo:nth-child(3n) {
    aspect-ratio: 1 / 1;
}

    .ck-public .ck-gallery-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .25s ease;
    }

    .ck-gallery-photo:hover img {
        transform: scale(1.035);
    }

    .ck-gallery-photo:focus-visible {
        outline: 3px solid #b86b35;
        outline-offset: 3px;
    }

.ck-gallery-overlay {
    position: absolute;
    inset: auto 0 0;
    padding: 2rem 1rem .8rem;
    background: linear-gradient(transparent, #000b);
    text-align: left;
    pointer-events: none;
}

    .ck-gallery-overlay strong, .ck-gallery-overlay span {
        display: block;
    }

.ck-gallery-actions {
    text-align: center;
    margin-top: 2rem;
}

.ck-gallery [data-gallery-more]:not(:disabled) {
    cursor: pointer;
}

.ck-gallery [hidden] {
    display: none !important;
}

.ck-photo-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .8rem 4rem;
    color: white;
    background: #0009;
    text-align: center;
    max-height: 25vh;
    overflow: auto;
}

    .ck-photo-caption strong, .ck-photo-caption span {
        display: block;
        white-space: pre-wrap;
    }

@media (max-width: 1100px) {
    .ck-gallery-grid {
        --gallery-columns: 3;
    }
}

@media (max-width: 650px) {
    .ck-gallery-grid {
        --gallery-columns: 2;
        column-gap: .6rem;
    }

    .ck-gallery-photo {
        margin-bottom: .6rem;
        max-height: 280px;
    }

    .ck-gallery-overlay {
        font-size: .8rem;
        padding: 1.5rem .5rem .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ck-public .ck-gallery-photo img {
        transition: none;
    }
}