.history.generic-section {
    padding: 8px 0 0;
    background-color: var(--background-list-white);
}

.history.dark-grey {
    background-color: var(--background-list-dark-grey);
}

.history.grey {
    background-color: var(--background-list-grey);
}

.history .container-slide {
    color: var(--black);
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    scroll-behavior: smooth;
    padding-top: 56px;
}

.history .container-slide::-webkit-scrollbar,
.history-timeline .scroller::-webkit-scrollbar {
    background: transparent;
    height: 0;
    width: 0;
}

.history .container-slide .slide-year {
    padding-top: 90px;
    font-weight: 400;
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: start;
    position: relative;
    background-color: var(--background-list-white);
}

.history .container-slide .slide-year.dark-grey {
    background-color: var(--background-list-dark-grey);
}

.history .container-slide .slide-year.grey {
    background-color: var(--background-list-grey);
}

.history .container-slide .slide-year .content-info {
    display: flex;
    max-width: 1316px;
    padding: 0 32px;
    margin: 0 auto;
    width: 100%;
    min-height: 320px;
}

.history .container-slide .slide-year .content-info .container-text {
    flex-shrink: 0;
    width: max(40%, 330px);
    padding-right: 16px;
}

.history .container-slide .slide-year .year {
    font-size: var(--text-xxxl);
    font-family: var(--font-frutiger-medium);
    margin-bottom: 0.5em;
    line-height: 42px;
    color: #05365f;
    letter-spacing: 1px;
}

.history .container-slide .slide-year .description {
    letter-spacing: 0.5px;
    font-size: 20px;
    line-height: 24px;
    padding-bottom: 50px;
    color: var(--color-text-grey);
}

.history .container-slide .slide-year .container-img-history {
    width: 100%;
    max-width: 49%;
    position: absolute;
    right: 0;
    top: -56px;
    height: 416px;
}

.history .container-slide .slide-year .container-img-history img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.history-timeline {
    border-top: 1px solid rgba(5,54,95,.14902);
    position: relative;
    padding-bottom: 80px;
    background-color: var(--background-list-white);
}

.history-timeline.dark-grey {
    background-color: var(--background-list-dark-grey);
}

.history-timeline.grey {
    background-color: var(--background-list-grey);
}

.history-timeline .content-info {
    max-width: 1316px;
    padding: 0 32px;
    margin: auto;
    position: relative;
}

.history-timeline .content-info .scroller {
    min-height: 60px;
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    scroll-behavior: smooth;
    position: relative;
    bottom: 1px;
    align-items: baseline;
    gap: 28px;
}

.history-timeline .content-info .scroller .span-year {
    flex-shrink: 0;
    scroll-snap-align: start;
    position: relative;
    transition: all .25s ease-in-out;
    font-size: var(--text-s);
    color: var(--color-text-grey);
    font-family: var(--font-frutiger-bold);
    padding: 17px 9px;
    cursor: pointer;
}

.history-timeline .content-info .scroller .span-year.active {
    font-size: var(--text-xxxxm);
    border-top: 2px solid var(--color-text-grey);
}

@media (max-width: 767px) {
    .history .container-slide .slide-year .content-info .container-text {
        width: max(49%, 330px);
        max-width: 51%;
    }
}

@media (max-width: 576px) {
    .history.generic-section {
        padding-top: 16px
    }

    .history .container-slide .slide-year {
        padding-top: 0;
    }

    .history .container-slide .slide-year .content-info {
        padding: 0 16px;
        flex-direction: column;
    }

    .history .container-slide .slide-year .content-info .container-text {
        width: 100%;
        max-width: 100%;
        order: 2;
        padding: 40px 0;
    }

    .history .container-slide .slide-year .year {
        font-size: 48px;
    }

    .history .container-slide .slide-year .description {
        font-size: var(--text-s);
        line-height: 24px;
    }

    .history .container-slide .slide-year .middle-sizer {
        height: 270px;
        order: 1;
        margin-bottom: 0;
    }

    .history .container-slide .slide-year .container-img-history {
        width: 100%;
        max-height: 272px;
        max-width: none;
        left: 0;
        right: 0;
        top: 0;
        order: 1;
    }
}