.kjo-finansowanie {
--kjo-linia: color-mix(in srgb, var(--wp--preset--color--base) 24%, transparent);
}
.kjo-finansowanie__kolumny {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: start;
gap: clamp(2rem, 5vw, 5rem);
}
.kjo-finansowanie .kjo-naglowek {
margin-block-end: var(--wp--preset--spacing--40);
}
.kjo-finansowanie__kwoty {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wp--preset--spacing--30);
margin-block: 0;
} .kjo-finansowanie__kafel {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
gap: 0.5rem;
padding: 1.25rem 1.5rem;
border: 2px solid var(--kjo-linia);
border-radius: var(--kjo-r);
}
.kjo-finansowanie__kafel dd {
color: var(--wp--preset--color--accent-light);
font-family: var(--wp--preset--font-family--display);
font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
font-weight: 500;
font-variant-numeric: lining-nums;
line-height: 1.05;
letter-spacing: -0.01em;
white-space: nowrap;
}
.kjo-finansowanie__kafel dt {
color: color-mix(in srgb, var(--wp--preset--color--base) 82%, var(--wp--preset--color--dark));
font-size: var(--wp--preset--font-size--sm);
line-height: 1.4;
} .kjo-proporcja {
margin-block-start: var(--wp--preset--spacing--40);
}
.kjo-proporcja__pasek {
display: grid;
grid-template-columns: 55fr 45fr;
gap: 3px;
height: 1rem;
}
.kjo-proporcja__ue {
border-radius: 999px 0 0 999px;
background-color: var(--wp--preset--color--accent-light);
}
.kjo-proporcja__kraj {
border-radius: 0 999px 999px 0;
background-color: color-mix(in srgb, var(--wp--preset--color--base) 55%, var(--wp--preset--color--dark));
}
.kjo-proporcja__etykiety {
display: grid;
grid-template-columns: 55fr 45fr;
gap: 3px;
margin-block-start: 0.625rem;
font-size: var(--wp--preset--font-size--sm);
font-weight: 600;
line-height: 1.3;
}
.kjo-finansowanie__formalne {
display: grid;
gap: 0.5rem;
max-width: 62rem;
margin-block-start: var(--wp--preset--spacing--50);
padding-block-start: 1.25rem;
border-block-start: 2px solid var(--kjo-linia);
}
@media (max-width: 1023px) {
.kjo-finansowanie__kolumny {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 479px) {
.kjo-finansowanie__kafel {
padding: 1rem;
}
.kjo-finansowanie__kafel dd {
font-size: 1.375rem;
}
}