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

.curved {
    position: relative;
    overflow: hidden;
    width: 100%;
    --v-offset: -110px;
    --curve-height: 1000px;
    clip-path: url(#u-clip-desktop);
}

.curved:before {
    content: "";
    display: block;
    background: white;
    width: calc(100% + (-5) * var(--v-offset));
    height: var(--curve-height);
    position: absolute;
    border-radius: 70%;
    left: -110px;
    right: calc(1 * var(--v-offset));
    z-index: 1;
    pointer-events: none;
    top: calc(-0.7 * var(--curve-height));
}

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

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

.curved__item img{
    display: block;
    width: 100%;        
    height: 850px;     
    max-width: none;    
    max-height: none;   
    object-fit: fill;
    object-position: center;
    margin: 0; padding: 0; border: 0;
}

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

/* Small screens (mobile) */
@media (max-width: 640px) {
    .curved {
        --curve-height: 280px;
        clip-path: url(#u-clip-mobile);
    }
    .curved:before {
        left: -100px;
        width: calc(100% + (-4) * var(--v-offset));
        top: calc(-0.8 * var(--curve-height));
    }
    .curved__item img{
        width: 100%;        
        height: 300px;       
        object-fit: fill;
    }
}

/* Medium screens (tablet) */
@media (min-width: 641px) and (max-width: 1023px) {
    .curved {
        --curve-height: 500px;
        clip-path: url(#u-clip-tablet);
    }
    .curved:before {
        left: -150px;
        top: calc(-0.8 * var(--curve-height));
    }
    .curved__item img{
        width: 100%;        
        height: 300px;       
        object-fit: fill;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .curved {
        --curve-height: 650px;
        clip-path: url(#u-clip-tablet);
    }
    .curved:before {
        left: -180px;
        top: calc(-0.7 * var(--curve-height));
    }
    .curved__item img{
        width: 100%;        
        height: 700px;       
        object-fit: fill;
    }
}