.hero {
display: flex;
min-height: calc(100svh - var(--nav-h));
overflow: hidden;
position: relative;
container-type: inline-size;
} .hero__content {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 6rem var(--pad-x) 6rem max(var(--pad-x), calc((100cqw - var(--container)) / 2 + var(--pad-x)));
position: relative;
z-index: 2;
}
.hero__left {
max-width: 640px;
width: 100%;
display: flex;
flex-direction: column;
gap: 2.25rem;
} .hero__title {
font-family: var(--f-heading);
font-size: var(--text-hero);
line-height: 1.05;
color: var(--blk-text, var(--c-white));
} .hero__sub {
font-family: var(--f-body);
font-size: var(--text-2xl);
font-weight: 400;
line-height: 1.65;
color: #94A3B8;
max-width: 520px;
} .hero__btns {
display: flex;
align-items: center;
gap: 0.875rem;
flex-wrap: wrap;
} .hero__image {
width: 50%;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.hero__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
} .hero--img-text {
flex-direction: row-reverse;
}
.hero--img-text .hero__content {
justify-content: flex-start;
padding-left: var(--pad-x);
padding-right: max(var(--pad-x), calc((100cqw - var(--container)) / 2 + var(--pad-x)));
} @media (max-width: 1200px) {
.hero__image {
width: 45%;
}
.hero__content {
justify-content: flex-start;
padding-left: var(--pad-x);
}
}
@media (max-width: 1024px) {
.hero__title {
font-size: var(--text-hero);
}
.hero__sub {
font-size: var(--text-lg);
}
}
@media (max-width: 768px) {
.hero {
flex-direction: column;
min-height: auto;
}
.hero__image {
width: 100%;
height: 320px;
order: -1;
}
.hero__content {
padding: 3rem var(--pad-x) 4rem;
justify-content: flex-start;
}
.hero__left {
max-width: 100%;
gap: 1.5rem;
}
.hero__sub {
font-size: var(--text-base);
max-width: 100%;
}
.hero__btns {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 480px) {
.hero__image { height: 240px; }
} @media (prefers-reduced-motion: reduce) {
}