/*********************************************
 * Home Banner
**********************************************/
.px-home-banner--height {height:clamp(400px, 70vh, 840px) !important; width:100%;}

/* dots */
.px-home-banner .flickity-page-dots {
    position:absolute;
    top:50%; bottom:auto;
    right:var(--px-gap-container);
    transform:translateY(-50%);
    width:auto;
    padding:8px 2px;
    min-height:60px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    border-radius:40px;
    background:#ffffff57;
    box-shadow:0 0 5px 0 rgba(0, 0, 0, .1);
}
.px-home-banner .flickity-page-dots .dot {background:#fff; border:none;}
.px-home-banner .flickity-page-dots .dot.is-selected {background:var(--px-color-yellow);}

/*.px-home-banner .flickity-prev-next-button {opacity:0;}*/

/* overlay */
.px-home-banner__slide.has-content .px-home-banner__slide-media:before {
    background:linear-gradient(180deg, rgba(0, 0, 0, 0.696) -1.81%, rgba(0, 0, 0, 0.496) 66.94%, rgba(92, 92, 92, 0) 98.19%);
    mix-blend-mode:multiply;
    opacity:0.7;
    z-index:2;
}

/* separate content */
.px-home-banner__content {padding:0 var(--px-gap-container) 60px; max-width:var(--px-container);}


/*********************************************
 * Home Banner > Slide
**********************************************/
.px-home-banner__slide {width:100%;}

/* image */
/*.px-home-banner__slide-media.-image {transition:transform 10s ease;}*/
/*.px-home-banner__slide:not(.is-selected) .px-home-banner__slide-media.-image {transform:scale(1.1);}*/

/* content */
.px-home-banner__slide-content {
    padding:0;
    max-width:500px;
}

/* show/hide image desktop/mobile */
.px-home-banner__slide-media.-image img.is-mobile {display:none;}
@media only screen and (max-width:768px) {
    .px-home-banner__slide-media.-image.has-image-mobile img.is-desktop {display:none;}
    .px-home-banner__slide-media.-image.has-image-mobile img.is-mobile {display:block;}
}


/*********************************************
 * Home Banner Responsive
**********************************************/
@media only screen and (max-width:768px) {
    .px-home-banner--height {height:clamp(400px, 80vh, 840px) !important;}

    /* dots */
    .px-home-banner .flickity-page-dots {
        top:unset; right:unset;
        left:50%; bottom:20px; transform:translateX(-50%);
        min-height:0; flex-direction:row; gap:5px; padding:6px 5px;
    }

    /* content */
    /*.px-home-banner__slide-inner {align-items:flex-end; padding-bottom:60px;}*/
    .px-home-banner__slide-content {text-align:center; margin:0 auto; padding:0 40px;}
    .px-home-banner__slide-content br {display:none;}

    /* separate content */
    .px-home-banner__content {padding-left:0; padding-right:0;}
}