.kjo-system {
--kjo-linia: var(--wp--preset--color--line);
--kjo-wezel-w: 3.25rem;
--kjo-wezel-h: 3.9rem;
--kjo-odstep: var(--wp--preset--spacing--40);
} .kjo-system__klamra {
display: flex;
justify-content: center;
height: 1.75rem;
margin-inline: calc((100% - 3 * var(--kjo-odstep)) / 8 - 1px);
border: 2px solid var(--kjo-linia);
border-block-end: 0;
border-radius: var(--kjo-r) var(--kjo-r) 0 0;
}
.kjo-system__klamra span {
align-self: flex-start;
padding-inline: 1rem;
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--accent);
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--lg);
font-weight: 600;
line-height: 1;
translate: 0 -55%;
}
.kjo-system__moduly {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--kjo-odstep);
} .kjo-system__modul:not(:last-child)::after {
position: absolute;
top: calc(var(--kjo-wezel-h) / 2 - 1px);
left: 50%;
width: calc(100% + var(--kjo-odstep));
height: 2px;
background-color: var(--kjo-linia);
content: "";
}
.kjo-system__modul {
position: relative;
display: grid;
justify-items: center;
align-content: start;
gap: 1rem;
text-align: center;
} .kjo-system__wezel {
position: relative;
z-index: 1;
width: var(--kjo-wezel-w);
height: var(--kjo-wezel-h);
border: 2px solid var(--wp--preset--color--accent);
background-color: var(--wp--preset--color--base);
}
.kjo-system__nr {
position: absolute;
top: -0.375rem;
right: -0.625rem;
display: grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background-color: var(--wp--preset--color--accent);
color: var(--wp--preset--color--white);
font-size: var(--wp--preset--font-size--xs);
font-weight: 600;
line-height: 1;
}
.kjo-system__opis {
display: grid;
gap: 0.5rem;
}
.kjo-system__opis h3 {
font-size: var(--wp--preset--font-size--lg);
line-height: 1.25;
}
.kjo-system__opis p {
color: var(--wp--preset--color--muted);
} .kjo-wyniki {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--wp--preset--spacing--30);
margin-block-start: var(--wp--preset--spacing--50);
}
.kjo-wyniki__kafel {
display: flex;
align-items: center;
gap: 0.875rem;
padding: 1rem 1.25rem;
border-radius: var(--kjo-r);
background-color: var(--wp--preset--color--surface);
font-weight: 600;
line-height: 1.3;
}
.kjo-wyniki__kafel .kjo-ikona {
color: var(--wp--preset--color--accent);
}
@media (max-width: 899px) {
.kjo-system__klamra {
justify-content: flex-start;
height: auto;
margin: 0 0 1.25rem;
border: 0;
}
.kjo-system__klamra span {
padding: 0;
translate: none;
}
.kjo-system {
--kjo-odstep: 1.5rem;
}
.kjo-system__moduly {
grid-template-columns: minmax(0, 1fr);
} .kjo-system__modul: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-system__modul {
grid-template-columns: auto minmax(0, 1fr);
justify-items: start;
gap: 1.25rem;
text-align: start;
}
.kjo-wyniki {
grid-template-columns: minmax(0, 1fr);
}
}