.mtl {
--mtl-line: rgba(0, 0, 0, 0.14);
--mtl-dot: var(--orange-600);
--mtl-bg: var(--grey-100);
--mtl-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
--mtl-radius: 18px;
--mtl-dot-size: 14px;
--mtl-gutter: 34px; --mtl-item-gap: 14px; --mtl-pad-y: 8px;
}
.mtl .mtl__heading {
margin: 0 0 12px 0;
font-size: clamp(18px, 2.2vw, 26px);
line-height: 1.2;
}
.mtl .mtl__vtimeline {
position: relative;
} .mtl .mtl__vtrack {
position: relative;
display: grid;
row-gap: var(--mtl-item-gap);
margin: 0;
padding: 0;
} .mtl .mtl__vtrack::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--mtl-gutter) - (var(--mtl-dot-size) / 2));
width: 2px;
background: var(--mtl-line);
} .mtl .mtl__vitem {
display: grid;
grid-template-columns: var(--mtl-gutter) 1fr;
column-gap: 16px;
position: relative;
padding: var(--mtl-pad-y) 0; margin: 0;
} .mtl .mtl__vdot {
width: var(--mtl-dot-size);
height: var(--mtl-dot-size);
border-radius: 999px;
background: var(--mtl-dot); margin-top: 18px;
margin-left: calc((var(--mtl-gutter) - var(--mtl-dot-size)) / 2);
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.06);
} .mtl .mtl__vcontent {
background: var(--mtl-bg);
border-radius: var(--mtl-radius);
box-shadow: var(--mtl-shadow);
border: 1px solid rgba(0, 0, 0, 0.06);
padding: 16px 16px 14px 16px;
} .mtl .mtl__year {
font-weight: var(--bold-weight);
font-size: var(--body1-font-size);
color: var(--blue-600);
letter-spacing: 0.2px;
margin: 0 0 8px 0;
}
.mtl .mtl__text {
font-size: var(--body2-font-size);
color: var(--blue-600);
line-height: 1.45;
margin: 0;
} @media (max-width: 480px) {
.mtl {
--mtl-gutter: 28px;
--mtl-item-gap: 12px;
}
.mtl .mtl__vcontent {
padding: 14px 14px 12px 14px;
}
.mtl .mtl__year {
font-size: var(--body3-font-size);
}
} @media (min-width: 900px) {
.mtl {
--mtl-gutter: 42px;
}
}