/* gallery slideshow */
.gallery {
    --dot-size: 0.75rem;
    --gallery-duration: 0.35s;
    --gallery-easing: ease-in-out;

    .gallery-slides {
        list-style: none;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: relative;
    }

    .gallery-slide {
        display: none;
        &.is-active {
            display: block;
        }
        &.is-entering,
        &.is-leaving {
            display: block;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }
        &.is-entering {
            transform: translateX(calc(var(--gallery-direction, 1) * 100%));
        }
        &.is-leaving {
            transform: translateX(0);
        }
        &.is-animating {
            transition: transform var(--gallery-duration) var(--gallery-easing);
        }
        &.is-entering.is-animating {
            transform: translateX(0);
        }
        &.is-leaving.is-animating {
            transform: translateX(calc(var(--gallery-direction, 1) * -100%));
        }
    }

    .gallery-controls {
        align-items: center;
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        margin-block-start: 1rem;
    }

    .gallery-prev,
    .gallery-next {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 2rem;
        line-height: 1;
        padding: 0;
    }

    .gallery-pager {
        display: flex;
        gap: 0.5rem;
    }

    .gallery-dot {
        background-color: var(--whisper);
        border: none;
        border-radius: 100%;
        cursor: pointer;
        height: var(--dot-size);
        padding: 0;
        transition: background-color var(--transition-speed) var(--transition-timing-function);
        width: var(--dot-size);
        &.is-active {
            background-color: var(--loud);
        }
    }
}