.gallery-container {
    width: 94%;
    max-width: 1100px;
    margin: 0 auto;
    /* flexible height; mobile will reduce height via media query */
    aspect-ratio: 16/10;
    position: relative;
    padding: 12px;
    /* pad so items & shadows don't clip */
    overflow: visible;
}

.circular-gallery {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: visible;
    touch-action: none;
}

/* elliptical item: pure stretched ellipse */
.gallery-item {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* keep image clipped to ellipse */
    border: 1px solid gray;
    border-radius: 50%;
    /* circle if width==height, ellipse if unequal */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    transform-origin: 50% 50%;
}

/* stretch the image to fully fill container (distort allowed) */
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    /* IMPORTANT: fill will stretch image to container */
    display: block;
    background-color: gray;
}

/* hover effect on larger screens */
@media (hover: hover) and (min-width: 520px) {
    .gallery-item:hover {
        transform: translate(-50%, -50%) scale(1.06);
        z-index: 20;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
    }
}

/* mobile adjustments */
@media (max-width: 600px) {
    .gallery-container {
        aspect-ratio: 12/14;
        padding: 8px;
    }

    .gallery-item {
        transition: transform .16s, left .18s, top .18s, width .16s, height .16s;
    }
}