.yasmin-hero-slider {
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
color: #f9fafb;
padding-top: env(safe-area-inset-top);
padding-top: constant(safe-area-inset-top);
} body .yasmin-hero-slider {
min-height: 100vh;
} @media (max-width: 1439.98px) {
.yasmin-hero-slider.hero {
align-items: flex-end;
justify-content: flex-start;
padding-bottom: 15vh;
}
.yasmin-hero-slider .content {
margin-top: 0;
transform: none;
}
}
@media (min-width: 1440px) {
.yasmin-hero-slider.hero {
align-items: center;
justify-content: center;
padding-bottom: 0;
}
.yasmin-hero-slider .content {
margin-top: 0;
transform: none;
}
}
.yasmin-hero-slider::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.24),
rgba(0, 0, 0, 0.38)
);
z-index: 1;
}
.yasmin-hero-slider__background {
position: absolute;
inset: 0;
z-index: 0;
}
.yasmin-hero-slider__viewport {
position: relative;
width: 100%;
height: 100%;
}
.yasmin-hero-slider__track {
position: relative;
width: 100%;
height: 100%;
}
.yasmin-hero-slider__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.4s ease-out;
}
.yasmin-hero-slider__slide--active {
opacity: 1;
}
.yasmin-hero-slider__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
@media (max-width: 767px) {
.yasmin-hero-slider__image {
object-position: calc(50% + var(--yasmin-hero-offset-mobile, 0px)) center;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.yasmin-hero-slider__image {
object-position: calc(50% + var(--yasmin-hero-offset-tablet, 0px)) center;
}
}
@media (min-width: 1024px) {
.yasmin-hero-slider__image {
object-position: calc(50% + var(--yasmin-hero-offset-desktop, 0px)) center;
}
}
.yasmin-hero-slider .content {
position: relative;
z-index: 2;
}
.hero-heading {
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
} @media (min-width: 1280px) and (max-width: 1599.98px) {
.yasmin-hero-slider .hero-heading {
font-size: 7rem;
line-height: 7rem;
}
}
@media (min-width: 1600px) {
.yasmin-hero-slider .hero-heading {
font-size: 10rem;
line-height: 10rem;
}
}
.hero-contact {
display: inline-block;
margin-top: 1rem;
padding: 0.75rem 1.5rem;
border: none;
background: var(--color-accent);
color: #ffffff;
font-size: 1rem;
cursor: pointer;
text-decoration: none;
}