.ce_image {
    margin-block: 0;
    padding-block: calc(var(--spacing-section) / 2);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-regular);
}

.ce_image__figure {
    display: grid;
    min-width: 0;
    margin: 0 auto;
    gap: 12px;
}

.ce_image__figure--large { width: 75%; }
.ce_image__figure--medium { width: 50%; }
.ce_image__figure--small { width: 25%; }

.ce_image__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-card);
}

/* Match CE_Text_Image's existing caption and image/caption gap exactly. */
.ce_image__caption {
    border-top: 1px solid var(--color-border-subtle);
    padding-top: 12px;
    color: var(--color-primary);
    font-size: var(--font-size-meta);
    line-height: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.ce_image__slider {
    --ce-image-columns: 1;
    display: grid;
    min-width: 0;
    margin-inline: auto;
    gap: var(--spacing-md);
}

.ce_image__slides {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--ce-image-columns) - 1) * var(--spacing-md)) / var(--ce-image-columns));
    gap: var(--spacing-md);
}

.ce_image__slide {
    width: 100%;
    align-content: start;
    scroll-snap-align: start;
}

.ce_image__slide .ce_image__image {
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
}

@media (max-width: 700px) {
    /* Keep the gallery usable on phones; single-image percentages remain unchanged. */
    .ce_image__slider { width: 100%; }
}

@media (min-width: 701px) {
    .ce_image__slider { --ce-image-columns: 2; }
}

@media (min-width: 1024px) {
    .ce_image__slider { --ce-image-columns: 3; }
    .ce_image__slider[data-count="2"] { --ce-image-columns: 2; }
    .ce_image__figure { gap: 10px; }
    .ce_image__caption { color: var(--color-primary-muted); }
}

.ce_image__slider[data-count="1"] { --ce-image-columns: 1; }