@layer components{.timeline-item{--timeline-item-position:relative;--timeline-item-width:100%;--timeline-item-max-width:420px;--timeline-item-display:flex;--timeline-item-flex-shrink:0;--timeline-item-year-before-position:absolute;--timeline-item-year-before-size:var(--timeline-bullet-size);--timeline-item-year-before-border-radius:50%;--timeline-item-year-before-background-color:var(--timeline-accent-color);--timeline-item-year-before-border:var(--timeline-line-width) solid var(--color-bg);--timeline-item-year-position:relative;--timeline-item-year-color:var(--timeline-accent-color);--timeline-item-year-font-size:var(--font-size-l);display:var(--timeline-item-display);flex-direction:var(--timeline-item-flex-direction);flex-shrink:var(--timeline-item-flex-shrink);gap:var(--timeline-item-gap);max-width:var(--timeline-item-max-width);position:var(--timeline-item-position);width:var(--timeline-item-width)}.timeline[timeline-direction=vertical] .timeline-item{--timeline-item-gap:var(--spacing-normal);--timeline-item-flex-direction:column;--timeline-item-year-before-top:50%;--timeline-item-year-before-left:0;--timeline-item-year-before-transform:translate(calc(var(--timeline-distance-from-line)*-1 + var(--timeline-bullet-size)/2*-1 + 1px),-50%)}.timeline[timeline-direction=horizontal] .timeline-item{--timeline-item-gap:var(--spacing-l);--timeline-item-flex-direction:row;--timeline-item-padding:0 0 var(--spacing-s);--timeline-item-year-before-top:0;--timeline-item-year-before-left:50%;--timeline-item-year-before-transform:translate(-50%,calc(-100% - var(--spacing-normal) + 1px));padding:var(--timeline-item-padding)}.timeline-item__year{color:var(--timeline-item-year-color);flex-shrink:0;font-size:var(--timeline-item-year-font-size);position:var(--timeline-item-year-position)}.timeline-item:not(:first-child) .timeline-item__year{margin-top:var(--spacing-normal)}.timeline-item__year:before{background-color:var(--timeline-item-year-before-background-color);border:var(--timeline-item-year-before-border);border-radius:var(--timeline-item-year-before-border-radius);content:"";height:var(--timeline-item-year-before-size);left:var(--timeline-item-year-before-left);position:var(--timeline-item-year-before-position);top:var(--timeline-item-year-before-top);transform:var(--timeline-item-year-before-transform);width:var(--timeline-item-year-before-size)}@container (width >= 840px){.timeline[timeline-direction=vertical] .timeline-item{--timeline-item-max-width:var(--content-max-width);--timeline-item-display:grid;--timeline-item-grid-template-columns:1fr calc(var(--timeline-distance-from-line)*2) 1fr;--timeline-item-grid-tempalte-areas:"timelineLeft timelineYear timelineRight";--timeline-item-year-font-size:var(--font-size-xxl);grid-template-areas:var(--timeline-item-grid-tempalte-areas);grid-template-columns:var(--timeline-item-grid-template-columns)}.timeline[timeline-direction=vertical] .timeline-item__year{background-color:var(--timeline-accent-color);border-radius:var(--spacing-2px);color:var(--color-bg);grid-column:1/-1;grid-row:1;margin:0 auto var(--spacing-m);padding:var(--spacing-xs) var(--spacing-s);text-align:center;width:-moz-fit-content;width:fit-content}.timeline-item:not(:first-child) .timeline-item__year{margin-top:0}.timeline[timeline-direction=vertical] .timeline-item__year:before{display:none}.timeline[timeline-direction=horizontal] .timeline-item{--timeline-item-width:fit-content}}}