.at-timeline {
    container: timeline / inline-size;
    margin-bottom: 4em;
}

.at-timeline.bg-color {
    padding-top: 6rem;
    margin-bottom: 8em;
}

.at-timeline__heading {
    max-width: 100%;
    margin-bottom: 2em;
    text-align: center;
    font-size: .5rem;
    line-height: 1;
    letter-spacing: 2px;
        color: #767676;
}

.at-timeline__wrapper {
    --col-gap: 1.5rem;
    --line-w: 1px;
    position: relative;
    list-style-type: '';
}

.at-timeline__wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    display: block;
    width: 1px;
    border-left: var(--line-w) solid #A6A6A6;
}

.at-timeline__item {
    padding: calc(var(--col-gap) / 2) 1em;
}

.at-timeline__wrapper .at-timeline__item::before {
    content: '';
    display: inline-block;
    width: 5px;
    aspect-ratio: 1;
    background: #A6A6A6;
    border-radius: 4px;
    position: absolute;
    left: -2px;
}

.at-timeline__time {
    font-size: .8rem;
    display: block;
    white-space: nowrap;
}

.at-timeline__title {
    font-size: 1rem;
    color: var(--primaryColorBetterContrast);
}

.at-timeline__partners {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1em;
    margin-top: 2em;
    translate: 0 2em;
}

.at-timeline__partnersCaption {
    order: 1;
    font-size: .8rem;
    color: #000;
}

/**
 * Responsive layout
 */

@container timeline (min-width: 40rem) {
    .at-timeline__wrapper--ver {
        display: grid;
        grid-template-columns: 1fr var(--line-w) 1fr;
        grid-auto-columns: max-content;
        column-gap: var(--col-gap);
        justify-content: center;
    }

    .at-timeline__wrapper--ver::after {
        margin-inline: auto;
    }

    .at-timeline__wrapper--ver .at-timeline__item {
        grid-column: span 2;
        padding-inline: var(--col-gap);
    }

    .at-timeline__wrapper--ver .at-timeline__item::before {
        left: 50%;
        transform: translate(-50%, 0);
    }

    .at-timeline__wrapper--ver .at-timeline__item:nth-child(odd) {
        text-align: right;
    }

    .at-timeline__wrapper--ver .at-timeline__item:nth-child(even) {
        grid-column-end: -1;
    }

    .at-timeline__wrapper--hor {
        display: flex;
        overflow: auto;
        justify-content: center;
    }

    .at-timeline__wrapper--hor::after {
        content: '';
        position: absolute;
        inset: 2px 0 0 0;
        display: block;
        height: 1px;
        border-top: var(--line-w) solid #A6A6A6;
        width: 100%;
    }

    .at-timeline__wrapper--hor .at-timeline__item {
        position: relative;
        text-align: center;
    }

    .at-timeline__wrapper--hor .at-timeline__item::before {
        left: 50%;
        transform: translate(-50%, calc(var(--col-gap) / 2 * -1));
    }

}