.oriest-hero {
--oriest-hero-fade-speed: 1500ms; --oriest-hero-zoom-duration: 6500ms; --oriest-hero-zoom-scale: 1.06;  --oriest-hero-overlay-color: rgba(45, 30, 15, 0.12);
position: relative; width: 100vw;
margin-left: calc(50% - 50vw);
aspect-ratio: 16 / 7;
overflow: hidden;
background-color: #111; }
@media (max-width: 767px) {
.oriest-hero {
aspect-ratio: 5 / 6;
}
} .oriest-hero__slides {
position: relative;
width: 100%;
height: 100%;
}
.oriest-hero__slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition:
opacity var(--oriest-hero-fade-speed) ease,
visibility var(--oriest-hero-fade-speed) ease;
will-change: opacity;
}
.oriest-hero__slide.is-active {
opacity: 1;
visibility: visible;
z-index: 1;
} .oriest-hero__picture {
display: block;
width: 100%;
height: 100%;
}
.oriest-hero__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center; transform: scale(1);
will-change: transform;
} .oriest-hero__img.is-zooming {
animation: oriestHeroKenBurns var(--oriest-hero-zoom-duration) linear forwards;
}
@keyframes oriestHeroKenBurns {
from {
transform: scale(1);
}
to {
transform: scale(var(--oriest-hero-zoom-scale));
}
} @media (prefers-reduced-motion: reduce) {
.oriest-hero__slide {
transition: opacity 300ms ease;
}
.oriest-hero__img.is-zooming {
animation: none;
}
}  .oriest-hero__overlay {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: var(--oriest-hero-overlay-color);
}   .oriest-hero__content {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 24px;
color: #fff;
}
.oriest-hero__title {
margin: 0 0 16px;
font-size: clamp(1.75rem, 4vw, 3rem);
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.02em;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.oriest-hero__text {
margin: 0;
max-width: 640px;
font-size: clamp(0.9rem, 1.6vw, 1.125rem);
line-height: 1.8;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
} @media (max-width: 767px) {
.oriest-hero__title {
margin-bottom: 12px;
}
.oriest-hero__text br {
display: none; }
}