#highlights {
display: grid;
grid-template-columns: repeat(4, 1fr);
   grid-template-rows: 1fr;
column-gap: 2em;
row-gap: 2em;
padding: 40px 0px;
}
@media all and (max-width: 1224px) {
#highlights {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
}
#highlights ARTICLE {
display: flex;
vertical-align: middle;
text-align: center;
}
#highlights .highlights--center {
display: flex;
flex-direction: column;
align-items: center;
vertical-align: middle;
width: 100%;
padding: 20px;
}
#highlights DIV>DIV {
font-size: 3.4em;
line-height: normal;
font-weight: 700;
margin-bottom: -10px;
}
#highlights DIV>DIV SPAN.highlights--count {
font-size: 66px;
}
#highlights P {
display: block;
font-size: 0.9em;
line-height: 1.3em;
font-weight: 500;
}
#highlights H4 {
font-size: 23px;
font-weight: 900;
padding-top: 19px;
}
@media (max-width: 768px) { #highlights {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 20px;
padding-left: 20px;
scroll-padding-left: 20px;
}
#highlights::-webkit-scrollbar {
display: none;
}
#highlights article {
flex: 0 0 85%;
scroll-snap-align: start;
border-radius: 1rem;
background-color: rgba(255,255,255,0.05); }
#highlights article:first-child {
margin-left: 0;
}
#highlights article:last-of-type {
margin-right: 20px;
}
#highlights article:last-of-type {
margin-right: 20px;
}
#highlights .highlights--center {
background-color: #5a9a9217;
border-radius: 1rem;		
}
#highlights DIV>DIV SPAN.highlights--count {
font-size: 53px;
}
} .timeline {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
gap: 2rem;
}
.timeline-item {
position: relative;
display: flex;
align-items: center;
gap: 1rem;
}
.timeline-line {
position: absolute;
top: -2.5rem;
left: 11px;
width: 1px;
height: 3rem;
background-color: #065f54;
}
.timeline-item:first-child .timeline-line {
display: none;
}
.timeline-marker.filled {
width: 24px;
height: 24px;
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 98 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1,0,0,1,-1096.64,-4600.12)"><g transform="matrix(2,0,0,2,1120.98,4685.22)"><path d="M0,-42.551L-12.168,-21.262L0,0L24.222,0L36.387,-21.262L24.222,-42.551L0,-42.551Z" style="fill:rgb(6,95,84);fill-rule:nonzero;"/></g></g></svg>');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.timeline-marker.outline {
width: 24px;
height: 24px;
background-image: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 24 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1,0,0,1,-14463.8,-2250.58)"><g transform="matrix(1,0,0,0.945312,13750,0)"><g transform="matrix(0.0643151,-0.0396654,0.0371323,0.0687026,700.927,2458.79)"><path d="M708.7,-726.295L843.484,-648.478L843.484,-492.842L708.7,-415.025L573.915,-492.842L573.915,-648.478L708.7,-726.295ZM708.945,-687.66L607.497,-629.089L607.497,-511.948L708.454,-453.66L809.902,-512.231L809.902,-629.372L708.945,-687.66Z" style="fill:white;"/></g></g></g></svg>');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.timeline-text {
color: #B9D6D3;
font-size: 1rem;
line-height: 1.5;
}
.timeline-text strong {
color: white;
display: block;
font-weight: 600;
margin-bottom: 0.2rem;
} .image-grid {
display: flex;
align-items: stretch;
gap: 0.5rem;
}
.image-grid__left {
width: 33.3333%;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.image-grid__left .image-half {
flex: 1;
overflow: hidden;
}
.image-grid__left img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.image-grid__right {
width: 66.6666%;
display: flex;
align-items: stretch;
}
.image-grid__right img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
} @media (max-width: 768px) {
.image-grid {
flex-direction: column;
gap: 0.25rem;
}
.image-grid__right {
order: -1;
width: 100%;
}
.image-grid__left {
flex-direction: row;
width: 100%;
gap: 0.25rem;
}
.image-grid__left .image-half {
flex: 1;
height: auto;
}
.image-grid__left img {
height: auto;
object-fit: contain;
}
}