.marquee-demo {
    display: grid;
    gap: 24px
}

.marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* --v-offset: 60px;
    --curve-height: 120px; */
    --v-offset: 40px;
    --curve-height: 220px;
}

.marquee:before,
.marquee:after {
    content: "";
    display: block;
    background: white;
    width: calc(100% + 2 * var(--v-offset));
    height: var(--curve-height);
    position: absolute;
    border-radius: 50%;
    left: calc(-1 * var(--v-offset));
    right: calc(-1 * var(--v-offset));
    z-index: 1;
    pointer-events: none;
}

.marquee:before {
    top: calc(-0.6 * var(--curve-height));
}

.marquee:after {
    bottom: calc(-0.6 * var(--curve-height));
}

.marquee__track {
    position: relative;
    display: flex;
    gap: var(--gap, 0);
    will-change: transform
}

.marquee__item {
    flex: 0 0 auto;
    margin: 0;
    padding: 0
}

.marquee__item img {
    display: block;
    width: 100%;
    height: 700px;
    object-fit: fill;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.marquee__item+.marquee__item {
    margin-left: -0.5px
}

@media (max-width: 640px) {
    .marquee {
        --curve-height: 60px;
    }
    .marquee__item img {
        width: 100%;
        height: 300px;
        object-fit: fill;
    }
}

/* Medium screens (tablet) */
@media (min-width: 641px) and (max-width: 1023px) {
    .marquee {
        --curve-height: 100px;
    }
    .marquee__item img {
        width: 100%;
        height: 570px;
        object-fit: fill;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .marquee {
        --curve-height: 120px;
    }
    .marquee__item img {
        width: 100%;
        height: 570px;
        object-fit: fill;
    }
}