body {
    margin: 0;
    display: grid;
    place-content: center;
    height: 100vh;
    background: #222;
}

section {
    timeline-scope: --carousel;
}

.fondo{
    background: radial-gradient(ellipse 80% 80% at 50% -20%,#0400f54d,rgb(1, 0, 2)); 
    position: absolute; 
    top: 0;
    width: 100%; 
    height: 100%; 
    left:0; 
    z-index: -1
}

.indicadores li:nth-child(1) {
    --i: 1;
}

.indicadores li:nth-child(2) {
    --i: 2;
}

.indicadores li:nth-child(3) {
    --i: 3;
}

.indicadores li:nth-child(4) {
    --i: 4;
}

.slider {
    scroll-timeline: --carousel x;
    display: flex;
    flex-direction: row;
    border-radius: 4px;
    width: 800px;
    aspect-ratio: 16/9;

    scroll-snap-type: x mandatory;
    overscroll-behavior: contain;
    scroll-behavior: smooth;

    overflow-x: scroll;
    overflow-y: hidden;

    box-shadow: 0px 0px 50px 10px rgba(255, 255, 255, .1);
}

.indicadores a {
    display: block;
    width: 16px;
    aspect-ratio: 1;
    background: white;
    opacity: .7;
    border-radius: 50%;
    animation: activate linear;
    animation-timeline: --carousel;
    animation-range: calc((var(--i) - 1) * 25%) calc(var(--i) * 25% + 1px);
}


@keyframes activate {
    0%,
    100% {
        background: #09f;
        opacity: 1;
    }
}

.slider a {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: center;
}

.slider img {
    object-fit: cover;
    width: 100%;
}

.indicadores {
    display: flex;
    flex-direction: row;
    gap: 0.25em;
    list-style: none;
    font-size: 2em;
    position: absolute;
    bottom: 5rem;
    left: 50%;
    translate: -50% 0;
}


.slider::-webkit-scrollbar{
    display: none;
}