.nb-timeline {
    --nb-timeline-axis-color: #17479e;
    --nb-timeline-arrow-color: #49aa91;
    --nb-timeline-card-bg: #d3daea;
    --nb-timeline-card-color: #111;
    --nb-timeline-headline-color: #17479e;
    --nb-timeline-axis-width: 4px;
    --nb-timeline-gap-x: 1rem;
    --nb-timeline-gap-y: 3rem;
    position: relative;
}

/* One axis for the complete timeline. Keeping the line on the parent avoids
   gaps between items and guarantees that every entry uses exactly the same
   center line. */
.nb-timeline::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: var(--nb-timeline-axis-width);
    transform: translateX(-50%);
    background: var(--nb-timeline-axis-color);
    pointer-events: none;
}

.nb-timeline__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--nb-timeline-axis-width) minmax(0, 1fr);
    align-items: start;
    position: relative;
    z-index: 1;
    padding-bottom: var(--nb-timeline-gap-y);
}

/* Kept in the markup for backwards compatibility, but the visible axis is
   rendered once by .nb-timeline::before. */
.nb-timeline__axis { display: none; }

.nb-timeline__meta {
    position: absolute;
    top: 2.25rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    white-space: nowrap;
    font-weight: 700;
}
.nb-timeline__year { font-size: 1.25rem; line-height: 1; }
.nb-timeline__arrow { width: 0; height: 0; border-top: .65rem solid transparent; border-bottom: .65rem solid transparent; }
.nb-timeline__card { background: var(--nb-timeline-card-bg); color: var(--nb-timeline-card-color); border-radius: .15rem; overflow: hidden; margin-top: .75rem; }
.nb-timeline__toggle { appearance: none; border: 0; background: transparent; color: inherit; display: block; text-align: left; width: 100%; padding: 1rem; cursor: pointer; }
.nb-timeline__headline { display: block; color: var(--nb-timeline-headline-color); font-size: 1.35rem; line-height: 1.15; text-transform: uppercase; }
.nb-timeline__teaser { display: block; margin-top: .25rem; }
.nb-timeline__collapse .nb-timeline__content { padding: 0 1rem 1rem; }
.nb-timeline__text > :last-child { margin-bottom: 0; }
.nb-timeline__images { display: grid; grid-template-columns: repeat(var(--nb-image-cols, 1), minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.nb-timeline__images--cols-1 { --nb-image-cols: 1; }
.nb-timeline__images--cols-2 { --nb-image-cols: 2; }
.nb-timeline__images--cols-3 { --nb-image-cols: 3; }
.nb-timeline__images--cols-4 { --nb-image-cols: 4; }
.nb-timeline__figure { margin: 0; }
.nb-timeline__image { display: block; width: auto; max-width: min(100%, var(--nb-timeline-image-max-width)); height: auto; }
.nb-timeline__caption { margin-top: .35rem; font-size: .875rem; }

.nb-timeline__item--right .nb-timeline__meta {
    right: calc(50% + (var(--nb-timeline-axis-width) / 2) + var(--nb-timeline-gap-x));
    justify-content: flex-end;
}
.nb-timeline__item--right .nb-timeline__meta .nb-timeline__arrow { border-left: .9rem solid var(--nb-timeline-arrow-color); }
.nb-timeline__item--right .nb-timeline__card { grid-column: 3; margin-left: var(--nb-timeline-gap-x); }

.nb-timeline__item--left .nb-timeline__meta {
    left: calc(50% + (var(--nb-timeline-axis-width) / 2) + var(--nb-timeline-gap-x));
    flex-direction: row-reverse;
    justify-content: flex-start;
}
.nb-timeline__item--left .nb-timeline__meta .nb-timeline__arrow { border-right: .9rem solid var(--nb-timeline-arrow-color); }
.nb-timeline__item--left .nb-timeline__card { grid-column: 1; margin-right: var(--nb-timeline-gap-x); }

.nb-timeline__content--orient-25,.nb-timeline__content--orient-26 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; align-items:start; }.nb-timeline__content--orient-25 .nb-timeline__images { grid-column:1; grid-row:1; margin-top:0; }.nb-timeline__content--orient-25 .nb-timeline__text { grid-column:2; }.nb-timeline__content--orient-26 .nb-timeline__images { grid-column:2; grid-row:1; margin-top:0; }.nb-timeline__content--orient-26 .nb-timeline__text { grid-column:1; }.nb-timeline__content--orient-8 { display:flex; flex-direction:column; }.nb-timeline__content--orient-8 .nb-timeline__images { order:2; }.nb-timeline__content--orient-8 .nb-timeline__text { order:1; }
@media (max-width: 767.98px) {
    .nb-timeline::before {
        left: 0;
        transform: none;
    }
    .nb-timeline__item {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        padding-left: calc(var(--nb-timeline-axis-width) + .8rem);
        padding-bottom: 2rem;
    }
    .nb-timeline__item--left .nb-timeline__meta,
    .nb-timeline__item--right .nb-timeline__meta {
        position: static;
        grid-column: 1;
        grid-row: 1;
        flex-direction: row;
        justify-content: flex-start;
        padding-top: 0;
        margin-bottom: .25rem;
    }
    .nb-timeline__item--left .nb-timeline__meta .nb-timeline__arrow,
    .nb-timeline__item--right .nb-timeline__meta .nb-timeline__arrow {
        border-top: .55rem solid transparent;
        border-bottom: .55rem solid transparent;
        border-left: .8rem solid var(--nb-timeline-arrow-color);
        border-right: 0;
    }
    .nb-timeline__item--left .nb-timeline__card,
    .nb-timeline__item--right .nb-timeline__card {
        grid-column: 1;
        grid-row: 2;
        margin-left: 0;
        margin-right: 0;
    }
    .nb-timeline__content--orient-25,
    .nb-timeline__content--orient-26 { display: block; }
    .nb-timeline__images--cols-3,
    .nb-timeline__images--cols-4 { --nb-image-cols: 2; }
}
@media (max-width: 479.98px) { .nb-timeline__images { --nb-image-cols: 1; } }