// The default gallery simulates a accordion

.gallery {
    --_gallery-gap: 0.4rem;
    --_gallery-height: 72rem;
    --_gallery-width: clamp(
        50%,
        100%,
        80vmin
    );
    --_bg: transparent;

    background-color: var(--_bg);

    display: flex;
    align-items: center;
    justify-content: center;

    height: 50%;
    padding: 0;

    width: var(--_gallery-width);
    align-self: center;
    margin: var(--spacing) auto;

    gap: var(--_gallery-gap);

    & > figure {
        flex: 1;
        text-align: center;

        will-change: flex;

        transition: flex 0.666s ease;

        &:hover {
            flex: 3;

            & > img {
                border-radius: var(--roundness);
            }
        }

        & figcaption {
            opacity: 0;

            transition: opacity 1.44s ease-out;
        }

        &:hover figcaption {
            opacity: 1;
        }
    }

    & img {
        cursor: pointer;
        border-radius: 100vmax;
        width: 100%;
        object-fit: cover;
        object-position: center;
        aspect-ratio: 1 / 8;
        height: clamp(
            64rem,    
            var(--_gallery-height),
            80vmax
        );
        transition:
            border-radius .4s var(--transition-out-circle);
    }
}

// Scroll Gallery, like Pinterest

.scroll-gallery {
    --_gallery-columns: 3;
    --_gallery-gap: .8rem;

    column-count: var(--_gallery-columns);
    gap: var(--_gallery-gap);
    width: var(--_gallery-width);

    img {
        margin-bottom: 0;
        overflow: hidden;
        object-fit: contain;
        object-position: center;
        backface-visibility: hidden;
    }
}