.kjo-hero {
padding-block: clamp(1.5rem, 1rem + 1vw, 1.75rem) var(--wp--preset--spacing--60);
}
.kjo-hero__inner {
display: grid;
grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
align-items: center;
gap: clamp(2rem, 4vw, 4.5rem);
}
.kjo-hero__tekst {
display: grid;
justify-items: start;
}
.kjo-hero__tytul {
margin-block-start: 0.875rem;
font-size: clamp(2.375rem, 1.6rem + 2.9vw, 3.625rem);
font-weight: 600;
line-height: 1.04;
letter-spacing: -0.02em;
}
.kjo-hero__podtytul {
margin-block-start: 0.5rem;
color: var(--wp--preset--color--accent);
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.01em;
}
.kjo-hero__wstep {
max-width: 42rem;
margin-block-start: 1rem;
line-height: 1.55;
}
.kjo-hero__formula {
max-width: 42rem;
margin-block-start: 1rem;
padding-block: 0.75rem;
line-height: 1.5;
}
.kjo-hero__przyciski {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-block-start: 1.25rem;
} .kjo-hero__medium {
position: relative;
} .kjo-hero__medium::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
width: 78%;
aspect-ratio: 5 / 6;
border-radius: var(--kjo-jajo);
background-color: var(--wp--preset--color--surface);
content: "";
translate: -34% -50%;
}
.kjo-hero__medium .kjo-zdjecie {
position: relative;
z-index: 1;
} .kjo-hero .kjo-zdjecie--brak {
background-color: var(--wp--preset--color--base);
}
@media (max-width: 1023px) {
.kjo-hero__inner {
grid-template-columns: minmax(0, 1fr);
gap: var(--wp--preset--spacing--50);
}
.kjo-hero__medium::before {
width: 60%;
translate: -20% -50%;
}
} @media (max-width: 767px) {
.kjo-hero__wstep {
order: 1;
}
.kjo-hero__przyciski {
order: 2;
}
}
@media (max-width: 480px) {
.kjo-hero__przyciski {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
}
}