.drkn--timeline { --drkn-tl-circle-size: 50px;
--drkn-tl-circle-color: #ff7a00;
--drkn-tl-line-color: #ff7a00;
--drkn-tl-line-width: 2px;
--drkn-tl-title-size: 18px;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
.drkn--timeline__list {
list-style: none;
margin: 0;
padding: 0;
}
.drkn--timeline__item {
display: grid;
grid-template-columns: calc(var(--drkn-tl-circle-size) + 16px) 1fr;
column-gap: 18px;
position: relative;
} .drkn--timeline__item + .drkn--timeline__item {
margin-top: calc(var(--drkn-tl-circle-size) * 0.35 + 8px);
}
.drkn--timeline__marker {
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
min-height: var(--drkn-tl-circle-size);
}
.drkn--timeline__circle {
width: var(--drkn-tl-circle-size);
height: var(--drkn-tl-circle-size);
border-radius: 999px;
background-color: var(--drkn-tl-circle-color);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
line-height: 1;
position: relative;
z-index: 2;
}
.drkn--timeline__number {
font-size: calc(var(--drkn-tl-circle-size) * 0.38);
letter-spacing: 0.02em;
} .drkn--timeline__line {
position: absolute;
left: calc((var(--drkn-tl-circle-size) / 2) - (var(--drkn-tl-line-width) / 2) - calc(var(--drkn-tl-line-width) / 2) + 9px);
top: calc(var(--drkn-tl-circle-size) + 9px);
bottom: -12px; width: var(--drkn-tl-line-width);
background-color: var(--drkn-tl-line-color);
opacity: 0.6;
z-index: 1;
} .drkn--timeline__item:last-child .drkn--timeline__line {
display: none;
}
.drkn--timeline__content {
}
.drkn--timeline__title {
font-size: var(--drkn-tl-title-size);
font-weight: 700;
margin: 0 0 6px 0;
}
.drkn--timeline__description {
margin: 0;
} @media (max-width: 600px) {
.drkn--timeline__item {
column-gap: 14px;
}
.drkn--timeline__number {
font-size: calc(var(--drkn-tl-circle-size) * 0.36);
}
}