<div class="s-hero container-fluid mb-5 px-0 overflow-hidden">
<div class="row align-content-center align-items-center">
<div class="main-carousel main-carousel-full dots dots-bullets dots-no-zoom dots-no-arrow col-12 px-0">
<div class="item w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="" class="img img-w img-auto img-h">
<div class="circle position position-absolute position-z-1 bg bg-color-primary col-12 col-lg-3 pt-5 px-4 d-lg-flex flex-lg-wrap align-items-center text text-center text-lg-left">
<div class="wrapper position position-relative position-z-1 pt-3">
<p class="text text-w-light text-color-white text-uppercase text-size-2-5 mb-0">Descubre</p>
<p class="text text-w-bold text-color-white text-uppercase text-size-2-3 text-size-lg-4 text-lh-100 mb-3 mid">nuestros hoteles</p>
<p class="text text-w-light text-color-white text-size-1-5 px-3">Una oportunidad unica de conocer cuba</p>
</div>
</div>
</div>
<div class="item w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="" class="img img-w img-auto img-h">
<div class="circle position position-absolute position-z-1 bg bg-color-primary col-12 col-lg-3 pt-5 px-4 d-lg-flex flex-lg-wrap align-items-center text text-center text-lg-left">
<div class="wrapper position position-relative position-z-1 pt-3">
<p class="text text-w-light text-color-white text-uppercase text-size-2-5 mb-0">Descubre</p>
<p class="text text-w-bold text-color-white text-uppercase text-size-2-3 text-size-lg-4 text-lh-100 mb-3 mid">nuestros hoteles</p>
<p class="text text-w-light text-color-white text-size-1-5 px-3">Una oportunidad unica de conocer cuba</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="s-hero container-fluid mb-5 px-0 overflow-hidden">
<div class="row align-content-center align-items-center">
<div class="main-carousel main-carousel-full dots dots-bullets dots-no-zoom dots-no-arrow col-12 px-0">
<div class="item w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="" class="img img-w img-auto img-h">
<div class="circle position position-absolute position-z-1 bg bg-color-primary col-12 col-lg-3 pt-5 px-4 d-lg-flex flex-lg-wrap align-items-center text text-center text-lg-left">
<div class="wrapper position position-relative position-z-1 pt-3">
<p class="text text-w-light text-color-white text-uppercase text-size-2-5 mb-0">Descubre</p>
<p class="text text-w-bold text-color-white text-uppercase text-size-2-3 text-size-lg-4 text-lh-100 mb-3 mid">nuestros hoteles</p>
<p class="text text-w-light text-color-white text-size-1-5 px-3">Una oportunidad unica de conocer cuba</p>
</div>
</div>
</div>
<div class="item w-100 overflow-hidden">
<img src="../../../img/dummy.png" alt="" class="img img-w img-auto img-h">
<div class="circle position position-absolute position-z-1 bg bg-color-primary col-12 col-lg-3 pt-5 px-4 d-lg-flex flex-lg-wrap align-items-center text text-center text-lg-left">
<div class="wrapper position position-relative position-z-1 pt-3">
<p class="text text-w-light text-color-white text-uppercase text-size-2-5 mb-0">Descubre</p>
<p class="text text-w-bold text-color-white text-uppercase text-size-2-3 text-size-lg-4 text-lh-100 mb-3 mid">nuestros hoteles</p>
<p class="text text-w-light text-color-white text-size-1-5 px-3">Una oportunidad unica de conocer cuba</p>
</div>
</div>
</div>
</div>
</div>
</div>
/* No context defined. */
// hero section
.s-hero {
.img { height: 100vh; }
.circle {
top: 0;
left: 0;
@include breakpoint(desktop) {
height: 100%;
top: initial;
bottom: -5rem;
transform: initial;
}
&::before {
@include border-radius(100%);
@extend %after-before-bas;
background-color: $color_primary;
width: 125vw;
height: 100vw;
left: 50%;
bottom: -20vw;
transform: translateX(-50%);
@include breakpoint(desktop) {
width: 200%;
height: 130%;
left: initial;
bottom: initial;
right: -40%;
top: 50%;
transform: translateY(-50%);
}
}
.mid {
@include breakpoint(desktop) { margin-bottom: 7rem !important; }
}
}
.dots {
&.dots {
&-arrow {
.flickity {
&-button {
border: none;
top: initial;
bottom: 3rem;
transform: initial;
@include breakpoint(desktop) { display: none; }
&.previous {
z-index: 5;
left: 2rem;
}
&.next {
z-index: 5;
right: 2rem;
}
}
}
}
}
.flickity {
&-page {
&-dots {
bottom: 3.45rem;
@include breakpoint(desktop) {
width: 40%;
left: initial;
right: 0;
}
.dot {
background-color: $color_white;
&.is-selected { background-color: $color_white; }
}
}
}
}
}
}
No notes defined.