.hero_2 {
display: grid;
position: relative !important;
}
.hero_2::after {
content: '';
position: absolute;
inset: 0;
background: var(--overlay);
z-index: 1;
}
.hero_2 > iframe {
z-index: 1;
}
.hero_2__img {
grid-area: 1 / 1;
display: grid;
}
.hero_2__img > * {
grid-area: 1/1;
}
.hero_2__img > *:last-child {
z-index: 1;
}
.hero_2__img_loading {
background-color: var(--neutral-200);
aspect-ratio: 16 / 9;
width: 100%;
max-height: 720px;
position: relative;
overflow: hidden;
}
.hero_2__img_loading::after {
content: "";
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, 0));
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translate(-100%);
animation: shimmer 1.2s infinite;
}
.hero_2__img img {
aspect-ratio: 16 / 9;
width: 100%;
max-height: 720px;
object-fit: cover;
object-position: inherit;
}
.hero_2__container {
grid-area: 1 / 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: end;
width: 100%;
padding-bottom: 90px;
z-index: 2;
pointer-events: auto;
}
.hero_2__intro_text {
margin-bottom: 8px;
color: #fff;
text-shadow: var(--text-shadow);
display: flex;
gap: 4px;
}
.hero_2__intro_text_style {
display: inline-block;
position: relative;
top: -1px;
}
.hero_2__title {
color: #fff;
text-shadow: var(--text-shadow);
}
.hero_2__content {
color: #fff;
margin-top: 12px;
text-shadow: var(--text-shadow);
}
.hero_2__buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.hero_2__buttons .btn__inner {
box-shadow: var(--box-shadow-warm);
}
.hero_2__video {
z-index: 1 !important;
aspect-ratio: 16 / 9 !important;
height: 100% !important;
}
@media(max-width: 1000px) {
.hero_2 {
aspect-ratio: 16/9;
}
.hero_2::after {
content: unset;
}
.hero_2__video {
height: unset !important;
}
.hero_2__img {
grid-area: unset;
}
.hero_2__container {
grid-area: unset;
padding-bottom: 32px;
padding-top: 24px;
}
.hero_2__intro_text {
color: unset;
text-shadow: unset;
}
.hero_2__title {
color: unset;
text-shadow: unset;
}
.hero_2__content {
color: unset;
text-shadow: unset;
max-width: 700px !important;
}
.shape-divider {
display: none;
}
}