:root{
--lb-wrapper: 100%; --lb-dot: 48px; --lb-dot-mobile: 21px; --lb-h-gap: 420px; --lb-v-gap: 345px; --lb-dot-color: #2FB3CC;
--lb-card-w: 360px; --lb-card-gap: 16px; --lb-card-pad: 0; --lb-media-radius: 12px;
}
.lb-timeline-wrapper{
width:var(--lb-wrapper);
padding: 200px 10px;
margin:0 auto;
} .lb-timeline{
--lb-rail: calc(var(--lb-h-gap) + var(--lb-dot)); --lb-side: calc((var(--lb-wrapper) - var(--lb-rail)) / 2); --lb-row-gap: calc(var(--lb-v-gap) - var(--lb-dot)); display:grid;
grid-template-columns: var(--lb-side) var(--lb-rail) var(--lb-side);
grid-auto-rows: var(--lb-dot);
row-gap: var(--lb-row-gap);
align-items:center; } .card.is-left .connector{
position: absolute;
right: 0;
top: 50%;
width: var(--lb-h-gap); height: var(--lb-v-gap); transform: translate(calc(100% + 24px), -20px);
pointer-events: none;
z-index: 1;
}
.card.is-right .connector {
position: absolute;
left: 0;
top: 0;
width: var(--lb-h-gap);
height: var(--lb-v-gap);
transform: translate(calc(-100% + -24px), 10px);
pointer-events: none;
z-index: 1;
} .dot{
position: relative;
width:var(--lb-dot); height:var(--lb-dot);
border-radius:50%; background:var(--lb-dot-color);
grid-column: 2; justify-self: start; z-index: 2;
}
.dot:nth-of-type(even){ justify-self: end; }  .card{
position: relative;
width:100%;
max-width: var(--lb-card-w);
display:flex; flex-direction:column; gap: var(--lb-card-gap);
padding: var(--lb-card-pad);
} .card.is-left{
grid-column: 1; justify-self: end; text-align:left;
padding-right: 10px;
}
.card.is-right{
grid-column: 3; justify-self: start; align-self: start; text-align:left; padding-left: 30px;
} .card.is-left .card-text {
position: absolute;
right: 0;
top: 50%;
transform: translate(100%, 50px);
} .media{
width:100%;
overflow:hidden;
display:block;
} .media img {
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.card.is-right .media{
position: absolute;
top: 0;
transform: translateY(calc(-100% + -10px));
}
.card.is-right .media img{
max-width: 240px;
} .year{
font-family:"Source Sans Pro", sans-serif;
font-size:60px;
font-weight:700;
line-height:1;
color:#2FB3CC;
margin:0;
}
.subtitle{
font-family:"Source Sans Pro", sans-serif;
font-size:20px;
line-height:25px;
font-weight:700;
color:#2F2F2F;
margin:.35rem 0 0;
} .lb-timeline-mobile{ display:none; } @media (max-width: 1024px){
.lb-timeline-wrapper{padding: 50px 0;}
.lb-timeline{ display:none; } .lb-timeline-mobile{
position: relative;
display:grid;
grid-template-columns: 1fr var(--lb-dot) 1fr; column-gap: 16px;
row-gap: 76px; align-items: center;
}
.lb-timeline-mobile .spine-svg {
position:absolute;
left:0;
top:0;
z-index:0;
pointer-events:none;
}
.lb-timeline-mobile .dot{
position:relative;
z-index:1;
width: var(--lb-dot);
height: var(--lb-dot);
border-radius: 50%;
background: var(--lb-dot-color);
justify-self: center;
align-self: center; margin-top: 0; }
.lb-timeline-mobile .image img{
width: 100%;
height: auto;
display: block;
border-radius: 12px; }
.lb-timeline-mobile .text{
transform: translateY(26px);
}
}
@media (max-width: 767px){
.lb-timeline-mobile{
grid-template-columns: 1fr var(--lb-dot-mobile) 1fr;
column-gap: 12px;
}
.lb-timeline-mobile .dot{
width: var(--lb-dot-mobile);
height: var(--lb-dot-mobile);
}
.year{
font-size: 40px;
}
.subtitle{
font-size:14px;
line-height: 18px;
}
}