.sliding-cards{

    -breakpoint : 1300px;

    .sliding-cards--head{

        margin-bottom: 55px;   
           
        @media only screen and (max-width: 1300px) {
            margin-bottom: 30px;   
            text-align:left;
        }

        .sliding-cards--titre{
            color: #012E41;
            font-family: Inter;
            font-style: normal;
            font-weight: 700;
            line-height: normal;

            @media only screen and (max-width: 1300px) {
                margin-bottom:7px;
            }
        }

        .sliding-cards--soustitre{
            color: #3D5A66;
            font-family: Inter;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;


            @media only screen and (max-width: 1300px) {
                font-size: 15px;
            }

            b{
                color:#00C599;
            }
        }
    }

    .cards{
        display: flex;
        gap:12px;

        @media only screen and (max-width: 1300px) {
            flex-direction: column;
        }

        .card{

            border-radius:20px;
            padding:26px 20px;
            display: flex;
            flex-direction: column;
            gap:14px;
            text-align:left;
            flex:1 1 0;
            min-width:0;
            overflow-wrap:break-word;
            transition: all 0.25s;
            overflow:hidden;
            position:relative;

            
            @media only screen and (max-width: 1301px) {
                flex:1 1 auto;
            }

            @media only screen and (min-width: 1301px) {

                flex:1 1 0;

                &.open{
                    flex: 1 1 30%;
                }
            }

           

            &:not(.open){
                cursor: pointer;
            }

            --color-titre: #012E41;
            --color-description: #3D5A66;
    

            &:nth-child(4n - 3){
                background-color: #f2f4f9;
            }
            &:nth-child(5n - 3){
                background-color: #00C599;
            }
            &:nth-child(6n - 3){
                background-color: #012E41;
                --color-titre: white;
                --color-description: white;
            }
            &:nth-child(7n - 3){
                background-color: #0A242E;
                --color-titre: white;
                --color-description: white;
            }

            .card-heading{

                display:flex;
                flex-direction: column;
                gap:14px;

                @media only screen and (max-width: 1300px) {
                    flex-direction: row;
                    align-items: center;
                    padding-right: 40px;
                }

                .card--index{
                    color: var(--color-titre);
                    font-family: Inter;
                    font-size: 24px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;

                    @media only screen and (max-width: 1300px) {
                        font-size: 15px;
                    }
                }

                .card--titre{
                    color: var(--color-titre);
                    font-family: Inter;
                    font-size: 21px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;

                    @media only screen and (max-width: 1300px) {
                        font-size: 18px;
                    }
                }
            }

           

            .card--description{
                color: var(--color-description);
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 140%;
                opacity:0;
                transition: all 0.25s;

                @media only screen and (max-width: 1300px) {
                    opacity:1;
                    font-size:15px;
                    .card:not(.open) &{
                        display:none;
                    }
                }    

                @media only screen and (min-width: 1301px) {
                    .card.open &{
                        opacity:1;
                    }
                }

                
            }

            .card--btn{
                background:rgba(255, 255, 255, 0.20);
                width:44px;
                height:44px;
                border-radius:50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top:auto;    
                transition: opacity 0.25s;  
                opacity:1;

                @media only screen and (max-width: 1300px) {
                    position:absolute;
                    top:50%;
                    transform:translateY(-50%);
                    right:20px;
                    width:34px;
                    height:34px;
                }

                .card.open &{
                    opacity:0;
                }

                .card:not(.open):hover &{
                    opacity:0.6;
                }

                svg{
                    width:16px;
                    height:16px;
                    path{
                        fill:var(--color-titre) !important;
                    }                    
                }
            }

        }

    }

    
}