.slidegallery {
    float: right;
    position: relative;
    width: 480px;
    max-width: 50%;
    aspect-ratio: 9 / 10.1;
    background: #eee;
    overflow: hidden;
    margin-left: 28px;
    padding-bottom: 34px; /* reserve space for dots row */
}

    /* stage holds stacked images */
    .slidegallery .sg-stage {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 34px;
        overflow: hidden;
        z-index: 1;
    }

        /* stacked images (now inside sg-stage) */
        .slidegallery .sg-stage > img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            opacity: 0;
            transition: opacity 350ms ease;
            pointer-events: none;
        }

            .slidegallery .sg-stage > img.is-active {
                opacity: 1;
            }

    /* controls row inside gallery, at bottom */
    .slidegallery .sg-controls {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        z-index: 5;
        background: #eee;
    }

    .slidegallery .sg-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid rgba(0,0,0,.25);
        background: rgba(255,255,255,.9);
        padding: 0;
        cursor: pointer;
    }

        .slidegallery .sg-dot.is-active {
            background: #000;
            transform: scale(1.2);
        }

    .slidegallery .sg-playpause {
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        color: #000;
        padding: 2px 6px;
    }

    .slidegallery .sg-playpause:focus {
        outline: 2px solid #3183b7;
        outline-offset: 2px;
    }

   .slidegallery .sg-controls { z-index: 5; }

    /* Optional arrows (only created when data-arrows="true") */
    .slidegallery .sg-arrow {
        position: absolute;
        top: calc((100% - 34px) / 2); /* center within stage area */
        transform: translateY(-50%);
        z-index: 6;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid rgba(0,0,0,.25);
        background: rgba(255,255,255,.75);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1;
    }

    .slidegallery .sg-prev {
        left: 8px;
    }

    .slidegallery .sg-next {
        right: 8px;
    }