.month-bloc {
  scroll-margin-top: 100px; /* Décale la position du scroll de 100px */
}
.month-bloc.inactive {
    display:none;
}
.month-bloc.active {
    display:flex !important;
}

.list-months-cards {
    display: flex;
    flex-direction: column;
    gap:2rem;
    margin-block-start:2rem;
}


.from-where-to-go {
    border-radius:15px;
    .label-wrapper {
        padding:1.5rem;
        .filter-button {
                border-radius: 25px;
            border:1px solid #707070;
            &:after {
                right:20px;
            }
        }
    }
}

.month-bloc {
    display: flex;
    flex-direction: row;
    background:var(--e-global-color-c03492d);
    border-radius:15px;
    overflow:hidden;
    .card-image {
        position: relative;
        height: initial;
        background-position: center center;
        background-size: cover;
        flex: 35%;
        display: flex;
        justify-content: center;
        align-items: center;
        h2 {
            aspect-ratio: 1 / 1;
            padding: 1rem;
            border: 1px solid #fff;
            color: #fff;
            display: flex;
            align-items: center;
        }
    }
    .card-content {
        padding:0;

        > * {
           padding:1.5rem;
        }
        .card-heading {
            border-bottom:1px solid rgba(0,0,0,0.1);
        }

        .country-spots-wrapper {
            -webkit-column-count: auto;
            -moz-column-count: auto;
            column-count: auto;
            -webkit-column-gap: 15px;
            -moz-column-gap: 15px;
            column-gap: 15px;
            column-width: 220px;
            font-size: 0.9rem;
            line-height: 1.2;
            > li {
                padding-bottom: 20px;
                break-inside: avoid;
                -o-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -webkit-transition: all .3s ease;
                transition: all .3s ease;
            }
            a {
                display: block;
                padding:2px 0;
            }
            .contry-spots {
               margin: 5px 0;
                padding:0;
                a {
                    color:var( --e-global-color-text );
                }
            }
        }
    }

}
@media only screen and (min-width:1025px ) {
    .from-where-to-go {
        .col-60 {
            border-right:1px solid #dedede;
        }
    }

}
@media only screen and (max-width:1024px ) {
    .month-bloc {
        flex-direction: column;
        .card-image {
            padding: 10%;
        }
    }

}