.sc-gallery {
    box-sizing: border-box;
}
.sc-gallery :where(*, *::before, *::after) {
    box-sizing: inherit;
}

.sc-gallery__figure {
}

.sc-gallery__link {
    display: block;
}

.sc-gallery__image {
    display: block;
}

.sc-gallery--grid {
    --grid-layout-gap: 1rem;
    --grid-column-count: 4;
    --grid-item--min-width: 12rem;

    --gap-count: calc( var( --grid-column-count ) - 1 );
    --total-gap-width: calc( var( --gap-count ) * var( --grid-layout-gap ) );
    --grid-item--max-width: calc( ( 100% - var( --total-gap-width ) ) / var( --grid-column-count ) );

    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( max( var( --grid-item--min-width ), var( --grid-item--max-width ) ), 1fr ) );
    grid-gap: var(--grid-layout-gap);
}

.sc-gallery--grid .sc-gallery__image,
.sc-gallery--columns .sc-gallery__image {
    width: 100%;
    height: auto;
    max-width: auto;
}

.sc-gallery--grid .sc-gallery__caption,
.sc-gallery--columns .sc-gallery__caption {
    margin-top: .3em;
    font-size: .9em;
    hyphens: auto;
}

@media (max-width: 45em) {
    .sc-gallery--grid {
        --grid-item--min-width: 9rem;
    }
}


.sc-gallery--columns {
    --column-count: 2;
    --column-gap: 1rem;
}

.sc-gallery--columns .sc-gallery__figure {
    margin-bottom: var( --column-gap );
}

@media (min-width: 45em) {
    .sc-gallery--columns {
        columns: var( --column-count );
        gap: var( --column-gap );
    }
}


.sc-gallery--list {
    --list-gap: 1rem;
}
.sc-gallery--list .sc-gallery__figure {
    display: flex;
    gap: var( --list-gap );
}
.sc-gallery--list .sc-gallery__figure + .sc-gallery__figure {
    margin-top:  var( --list-gap );
}
.sc-gallery--list .sc-gallery__link,
.sc-gallery--list .sc-gallery__figure > .sc-gallery__image {
    flex: 1 1 30%;
    min-width: 8em;
    max-width: 10em;
}
.sc-gallery--list .sc-gallery__caption {
    width: 70%;
    flex-shrink: 1;
    display: flex;
    align-items: center;
    text-align: left;
}