.banner_slider_wrapper {
height: 70vh;
min-height: 600px;
max-height: 800px;
overflow: hidden;
position: relative;
}
@media (max-width: 640px) {
.banner_slider_wrapper {
min-height: 400px;
}
}
.banner_slider_wrapper .banner_slider_inner,
.banner_slider_wrapper .the_banner_slider {
height: 100%;
}
.banner_slider_wrapper .banner_slider_inner img,
.banner_slider_wrapper .the_banner_slider img {
height: 100%;
width: 85%;
max-width: 1500px;
-o-object-fit: cover;
object-fit: cover;
margin-left: auto;
opacity: 0.6;
position: absolute;
right: 0;
bottom: 0;
}
@media (max-width: 850px) {
.banner_slider_wrapper .banner_slider_inner img,
.banner_slider_wrapper .the_banner_slider img {
width: 100%;
}
}
.banner_slider_wrapper .banner_slider_inner .wp_content,
.banner_slider_wrapper .the_banner_slider .wp_content {
position: relative;
z-index: 2;
}
@media (max-width: 640px) {
.banner_slider_wrapper .banner_slider_inner .wp_content,
.banner_slider_wrapper .the_banner_slider .wp_content {
max-width: 280px;
margin: auto;
}
}
.banner_slider_wrapper .banner_slider_inner .wp_content .key,
.banner_slider_wrapper .the_banner_slider .wp_content .key {
color: var(--bg-yellow);
}
.banner_slider_wrapper .banner_slider_inner .wp_content .hero,
.banner_slider_wrapper .the_banner_slider .wp_content .hero {
color: var(--bg-yellow);
text-transform: uppercase;
font-weight: 900;
margin: 0.2em 0;
}
@media (max-width: 850px) {
.banner_slider_wrapper .banner_slider_inner .wp_content,
.banner_slider_wrapper .the_banner_slider .wp_content {
text-align: center;
}
}
.banner_slider_inner {
display: grid;
grid-template-columns: 1fr;
}
.banner_slider_inner .the_banner_slider {
display: grid;
grid-template-columns: 1fr;
grid-area: 1/1;
opacity: 0;
transition: 0.3s;
padding-left: var(--width-l);
align-items: center;
}
@media (max-width: 1600px) {
.banner_slider_inner .the_banner_slider {
padding-left: 120px;
}
}
@media (max-width: 850px) {
.banner_slider_inner .the_banner_slider {
padding-inline: var(--width-l);
}
}
.banner_slider_inner .the_banner_slider .wp_content {
transition: 0.7s;
transform: translateY(-300%);
}
.banner_slider_inner .the_banner_slider.active ~ .the_banner_slider .wp_content {
transform: translateY(300%);
}
.banner_slider_inner .the_banner_slider.active {
opacity: 1;
}
.banner_slider_inner .the_banner_slider.active .wp_content {
transform: translateY(0);
}
.banner_slider_inner .the_banner_slider * {
grid-area: 1/1;
}
.banner_slider_nav {
position: absolute;
z-index: 3;
top: 0;
left: var(--gap-m);
bottom: 0;
display: flex;
flex-direction: column;
gap: 15px;
justify-content: center;
}
@media (max-width: 640px) {
.banner_slider_nav {
flex-direction: row;
top: auto;
bottom: 20px;
left: 0;
right: 0;
}
}
.banner_button {
color: #FFF;
font-family: "Barlow";
font-size: 20px;
font-style: normal;
font-weight: 900;
line-height: 110%; letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
display: flex;
gap: 5px;
align-items: center;
transition: 0.3s;
}
.banner_button span {
opacity: 0.1;
}
.banner_button:before {
content: "";
width: 16px;
aspect-ratio: 1/1;
border-radius: 100%;
background: #fff;
opacity: 0.3;
}
.banner_button:hover {
transform: scale(1.1);
}
.banner_button.active {
color: var(--bg-yellow);
}
.banner_button.active:before {
background: var(--bg-yellow);
opacity: 1;
}
.banner_button.active span {
opacity: 1;
}
@media (max-width: 850px) {
.banner_button span {
opacity: 0.5;
}
}
@media (max-width: 640px) {
.banner_button {
font-size: 14px;
}
.banner_button span {
display: none;
}
.banner_button:before {
width: 16px;
}
}