.kjo-harmonogram__uwaga {
max-width: 52rem;
}
.kjo-os {
--kjo-linia: var(--wp--preset--color--line);
margin-block-start: var(--wp--preset--spacing--50);
}
.kjo-os__wiersz {
display: grid;
grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
align-items: center;
gap: var(--wp--preset--spacing--40);
} .kjo-os__tor {
display: grid;
grid-template-columns: repeat(25, minmax(0, 1fr));
align-items: center;
align-self: stretch;
background-image:
linear-gradient(var(--kjo-linia), var(--kjo-linia)),
linear-gradient(var(--kjo-linia), var(--kjo-linia)),
linear-gradient(var(--kjo-linia), var(--kjo-linia));
background-repeat: no-repeat;
background-position: 0 0, 28% 0, 76% 0;
background-size: 2px 100%;
}
.kjo-os__lata {
padding-block-end: 0.75rem;
}
.kjo-os__lata span {
padding-inline-start: 0.75rem;
color: var(--wp--preset--color--muted);
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--lg);
font-weight: 600;
font-variant-numeric: lining-nums;
line-height: 1;
}
.kjo-os__etap {
border-block-start: 1px solid var(--kjo-linia);
}
.kjo-os__etap:last-child {
border-block-end: 1px solid var(--kjo-linia);
}
.kjo-os__opis {
display: flex;
align-items: center;
gap: 1rem;
padding-block: 1rem;
}
.kjo-os__opis h3 {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--md);
font-weight: 600;
line-height: 1.3;
}
.kjo-os__nr {
width: 2.75rem;
height: 3.3rem;
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--md);
font-weight: 600;
font-variant-numeric: lining-nums;
line-height: 1;
}
.kjo-os__pasek {
height: 0.875rem;
border-radius: 999px;
background-color: var(--wp--preset--color--dark);
} .kjo-os__etap--rownolegly .kjo-os__pasek {
background-color: var(--wp--preset--color--accent);
}
.kjo-harmonogram__etap-zero {
display: flex;
align-items: center;
gap: 0.75rem;
margin-block-start: var(--wp--preset--spacing--40);
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--sm);
font-weight: 600;
line-height: 1.4;
}
.kjo-harmonogram__etap-zero .kjo-ikona {
color: var(--wp--preset--color--accent);
}
@media (max-width: 899px) {
.kjo-os__wiersz {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.kjo-os__wiersz--lata > span:first-child {
display: none;
}
.kjo-os__opis {
padding-block: 1rem 0.5rem;
}
.kjo-os__etap .kjo-os__tor {
height: 2rem;
margin-block-end: 0.75rem;
}
}