.mve-timeline {
--mve-timeline-bg: #fff;
--mve-line: rgba(0, 0, 0, 0.18);
--mve-text: #143a67;
--mve-date: #143a67;
--mve-date-featured: #cc893e;
--mve-gutter: 148px;
--mve-gap: 24px;
--mve-card-max: 420px;
--mve-item-space: 56px;
max-width: 980px;
margin: 4rem auto;
padding: 0 1rem;
color: var(--mve-text);
}
.mve-timeline__list {
position: relative;
margin: 2.5rem 0;
padding: 0;
}
.mve-timeline__list::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
transform: translateX(-50%);
background: var(--mve-line);
z-index: 0;
}
.mve-timeline__item {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--mve-gutter) minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: var(--mve-gap);
row-gap: 6px;
align-items: start;
margin: 0 0 var(--mve-item-space) 0;
position: relative;
z-index: 1;
}
.mve-timeline__item::after {
content: none !important;
}
.mve-timeline__content {
display: contents;
}
.mve-timeline__title,
.mve-timeline__description {
min-width: 0;
max-width: var(--mve-card-max);
}
.mve-timeline__title {
grid-row: 1;
margin: 0;
font-weight: 800;
font-size: 20px;
line-height: 1.15;
letter-spacing: -0.015em;
padding-top: 10px;
}
.mve-timeline__description {
grid-row: 2;
margin: 0;
font-size: 18px;
line-height: 1.55;
}
.mve-timeline .mve-timeline__description p,
.mve-timeline .mve-timeline__content h1,
.mve-timeline .mve-timeline__content h2,
.mve-timeline .mve-timeline__content h3,
.mve-timeline .mve-timeline__content h4,
.mve-timeline .mve-timeline__content p {
margin: 0;
}
.mve-timeline__year {
grid-column: 2;
grid-row: 1;
justify-self: center;
align-self: start;
text-align: center;
position: relative;
z-index: 2;
display: inline-block;
font-weight: 800;
font-size: 1.875rem;
line-height: 1;
white-space: nowrap;
color: var(--mve-date);
background: var(--mve-timeline-bg);
padding: 5px 0.6rem;
}
.mve-timeline__item.is-featured .mve-timeline__year {
color: var(--mve-date-featured);
}
.mve-timeline--start-left
.mve-timeline__item:nth-child(odd)
.mve-timeline__title,
.mve-timeline--start-left
.mve-timeline__item:nth-child(odd)
.mve-timeline__description {
grid-column: 1;
justify-self: end;
text-align: right;
}
.mve-timeline--start-left
.mve-timeline__item:nth-child(even)
.mve-timeline__title,
.mve-timeline--start-left
.mve-timeline__item:nth-child(even)
.mve-timeline__description {
grid-column: 3;
justify-self: start;
text-align: left;
}
.mve-timeline--start-right
.mve-timeline__item:nth-child(odd)
.mve-timeline__title,
.mve-timeline--start-right
.mve-timeline__item:nth-child(odd)
.mve-timeline__description {
grid-column: 3;
justify-self: start;
text-align: left;
}
.mve-timeline--start-right
.mve-timeline__item:nth-child(even)
.mve-timeline__title,
.mve-timeline--start-right
.mve-timeline__item:nth-child(even)
.mve-timeline__description {
grid-column: 1;
justify-self: end;
text-align: right;
}
.mve-timeline__item.is-left .mve-timeline__title,
.mve-timeline__item.is-left .mve-timeline__description {
grid-column: 1 !important;
justify-self: end;
text-align: right;
}
.mve-timeline__item.is-right .mve-timeline__title,
.mve-timeline__item.is-right .mve-timeline__description {
grid-column: 3 !important;
justify-self: start;
text-align: left;
}
.mve-timeline__load-more {
display: block;
margin: 1.5rem auto 0;
padding: 0.9rem 1.5rem;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.16);
cursor: pointer;
font-weight: 700;
text-transform: none;
border-width: 2px;
background-color: rgb(255, 255, 255);
color: rgb(20, 58, 103);
border-color: rgb(204, 137, 62);
padding: 0 35px;
}
.mve-timeline__load-more[aria-busy="true"] {
opacity: 0.65;
cursor: progress;
}
@media (max-width: 820px) {
.mve-timeline {
--mve-card-max: 100%;
--mve-item-space: 36px;
--mve-gutter: 40px;
--mve-gap: 28px;
padding: 0 0.75rem;
}
.mve-timeline__list::before {
left: calc(var(--mve-gutter) / 2);
transform: none;
}
.mve-timeline__item {
grid-template-columns: var(--mve-gutter) minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
column-gap: var(--mve-gap);
row-gap: 4px;
}
.mve-timeline__year {
grid-column: 1 !important;
grid-row: 1 !important;
justify-self: center;
align-self: start;
font-size: 1.25rem;
padding: 0 0.45rem;
margin-top: 1px;
}
.mve-timeline__year-sep {
display: block;
line-height: 0.8;
}
.mve-timeline__year-start,
.mve-timeline__year-end {
display: block;
text-align: center;
}
.mve-timeline__title {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: start !important;
text-align: left !important;
font-size: 18px;
padding: 0;
}
.mve-timeline__description {
grid-column: 2 !important;
grid-row: 2 !important;
justify-self: start !important;
text-align: left !important;
font-size: 16px;
}
}