.kjo-dzialania::before {
top: 2.5rem;
width: 9.5rem;
aspect-ratio: 240 / 568;
rotate: 14deg;
-webkit-mask-image: url(//kaczkazogrodka.pl/wp-content/themes/kaczka-jak-z-ogrodka/assets/images/tlo-pioro.svg);
mask-image: url(//kaczkazogrodka.pl/wp-content/themes/kaczka-jak-z-ogrodka/assets/images/tlo-pioro.svg);
}
@media (max-width: 767px) {
.kjo-dzialania::before {
top: 1.5rem;
width: 6rem;
}
}
.kjo-kroki {
--kjo-wezel-w: 3.25rem;
--kjo-wezel-h: 3.9rem;
--kjo-linia: color-mix(in srgb, var(--wp--preset--color--base) 28%, transparent);
--kjo-odstep: var(--wp--preset--spacing--40);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--kjo-odstep);
} .kjo-kroki__krok:not(:last-child)::after {
position: absolute;
top: calc(var(--kjo-wezel-h) / 2 - 1px);
left: calc(var(--kjo-wezel-w) / 2);
width: calc(100% + var(--kjo-odstep));
height: 2px;
background-color: var(--kjo-linia);
content: "";
}
.kjo-kroki__krok {
position: relative;
display: grid;
align-content: start;
gap: 1.125rem;
} .kjo-kroki__wezel {
position: relative;
z-index: 1;
width: var(--kjo-wezel-w);
height: var(--kjo-wezel-h);
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--xl);
font-weight: 600;
font-variant-numeric: lining-nums;
line-height: 1;
}
.kjo-kroki__krok--wykonany .kjo-kroki__wezel {
background-color: var(--wp--preset--color--accent-light);
color: var(--wp--preset--color--dark);
}
.kjo-kroki__krok--trwa .kjo-kroki__wezel {
border: 2px dashed var(--wp--preset--color--accent-light);
background-color: var(--wp--preset--color--dark);
color: var(--wp--preset--color--accent-light);
}
.kjo-kroki__opis {
display: grid;
gap: 0.5rem;
}
.kjo-kroki__status {
display: inline-flex;
align-items: center;
gap: 0.375rem;
color: var(--wp--preset--color--accent-light);
font-size: var(--wp--preset--font-size--xs);
font-weight: 600;
line-height: 1.2;
}
.kjo-kroki__status .kjo-ikona {
width: 1.125rem;
height: 1.125rem;
}
.kjo-kroki__opis h3 {
font-size: var(--wp--preset--font-size--lg);
line-height: 1.25;
}
.kjo-dzialania__okres {
max-width: 46rem;
margin-block-start: var(--wp--preset--spacing--50);
padding-block-start: 1.25rem;
border-block-start: 2px solid var(--kjo-linia, color-mix(in srgb, var(--wp--preset--color--base) 28%, transparent));
}
@media (max-width: 899px) {
.kjo-kroki {
--kjo-odstep: 1.75rem;
grid-template-columns: minmax(0, 1fr);
} .kjo-kroki__krok:not(:last-child)::after {
top: calc(var(--kjo-wezel-h) / 2);
left: calc(var(--kjo-wezel-w) / 2 - 1px);
width: 2px;
height: calc(100% + var(--kjo-odstep));
}
.kjo-kroki__krok {
grid-template-columns: auto minmax(0, 1fr);
gap: 1.25rem;
}
}