.lienzo-slider-cars-formations {
    width: 100%;
    position: relative;
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center;
    padding-bottom: 50px;
    margin-top: -40px !important;
    
    & .container{
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 3) - 22.5px);
        gap: 30px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding: 0 150px;

        &::after{
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: var(--wp--preset--gradient--vertical-sleeper) !important;
            z-index: 3;
            pointer-events: none;
        }

        &::-webkit-scrollbar{
            display: none;
        }

        & a{
            scroll-snap-align: center;
            text-decoration: none;

            & > article{
                display: grid;
                gap: 15px;
                grid-template-columns: 1fr;
                grid-template-rows: auto 1fr auto;
                align-items: start;
                height: 100%;
                background: var(--wp--preset--color--primary);
                overflow: hidden;
    
                & header {
                    position: relative;
                    display: grid;
                    gap: 15px;
                    grid-template-rows: 1fr auto;
                    align-items: start;
            
                    & figure{
                        display: grid;
                        overflow: hidden;
                        margin: 0;
                        position: relative;
    
                        &::after{
                            content: "";
                            position: absolute;
                            background: rgb(3,9,21);
                            left: 0;
                            right: 0;
                            height: 500px;
                            background: linear-gradient(0deg, var(--wp--preset--color--primary) 0%, rgba(255,255,255,0) 100%);
                            bottom: 0;
                            z-index: 1;
                        }
                
                        & img{
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            z-index: 1;
                            transition: opacity 0.5s ease-in-out;
                        }

                        & .hidden-img {
                            opacity: 0;
                            pointer-events: none;
                        }
    
                        & iframe{
                            z-index: 0;
                            justify-self: center;
                            height: 425px;
                            width: 225%;
                        }
                    }
    
                    & > .description{
                        position: absolute;
                        bottom: 0;
                        z-index: 2;
    
                        & .title{
                            margin: 0;
                            font-size: var(--wp--preset--font-size--x-large);
                            padding: 0 25px 10px 25px;
                            color: var(--wp--preset--color--text-primary);
                        }
    
                        & .extracto {
                            margin: 0;
                            padding: 0 25px;
                            font-size: var(--wp--preset--font-size--normal);
                            color: var(--wp--preset--color--text-secondary);
                        }
                    }
                }
            
                & footer{
                    display: grid;
                    grid-template-columns: 1fr auto;
                    align-items: center;
                    align-self: end;
                    margin: 0 25px;
                    padding: 25px 0;
                    gap: 5px;
                    border-top: 1px solid var(--wp--preset--color--quinary);
            
                    & div{
                        display: flex;
                        align-items: center;
                        overflow: hidden;
                        position: relative;
                        transition: all 0.6s ease;
                        font-weight: 500;
                        padding: 10px;
                        border-radius: 50%;
                        border: 1px solid var(--wp--preset--color--secondary);
                        background: var(--wp--preset--color--primary);
                        
                        & svg{
                            border-radius: 50%;
                            width: 30px;
                            height: 30px;
                            display: grid;
                            transition: all 0.6s ease;
                            justify-content: center;
                            align-content: center;
                            background: var(--wp--preset--color--primary);
                            stroke: var(--wp--preset--color--secondary);
                        }
                    }
                }
            }
        }
    }

    & > span{
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        height: 50px;
        width: 50px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        transition: all 0.6s ease;
        border-radius: 50%;
        border: 1px solid var(--wp--preset--color--secondary);
        background: var(--wp--preset--color--primary);
        z-index: 4;

        & svg{
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: grid;
            transition: all 0.6s ease;
            justify-content: center;
            align-content: center;
            background: var(--wp--preset--color--primary);
            stroke: var(--wp--preset--color--secondary);
        }

        &:hover{
            background: var(--wp--preset--color--secondary);
        }

        &:first-child{
            left: 35px;
            
            & svg{
                transform: rotate(180deg);
            }
        }

        &:last-child{
            right: 35px;
        }
    }
}

.no-transition{
    scroll-behavior: auto !important;
}

.dragging{
    cursor: grab;
    user-select: none;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
}

@media screen and (max-width: 900px){
    .lienzo-slider-cars-formations .container{
        grid-auto-columns: calc((100% / 2) - 15px);
        padding: 0;
    }
}

@media screen and (max-width: 600px){
    .lienzo-slider-cars-formations {

        & .container{
            grid-auto-columns: 100%;
            padding: 0 50px;
        }

        & > span{
    
            &:first-child{
                left: 15px;
            }
    
            &:last-child{
                right: 15px;
            }
        }
    }
}