.component-banner { overflow:hidden }
.component-banner a { text-decoration:none }
.component-banner .item .item-title { position:absolute; left:1rem; right:1rem; top:50%; z-index:2; transform:translateY(-50%); text-align:center; color:#fff; font-size:1.5rem; text-shadow:0 0 1px #000 }

.component-banner[data-hover-image="true"] .item { background:rgba(0,0,0,0.4) }
.component-banner[data-hover-image="true"] .img-placeholder img { transition:opacity .4s ease-out .1s }
.component-banner[data-hover-image="true"] .hovered-img-placeholder { position:absolute; left:-9999px; visibility:hidden; display:flex; flex-direction:column; justify-content:center; overflow:hidden }
.component-banner[data-hover-image="true"] .hovered-img-placeholder img { opacity:0; transition:opacity .4s ease-in .1s }
.component-banner[data-hover-image="true"] .item:hover .img-placeholder img { opacity:0 }
.component-banner[data-hover-image="true"] .item:hover .hovered-img-placeholder { left:0; right:0; top:0; bottom:0; visibility:visible }
.component-banner[data-hover-image="true"] .item:hover .hovered-img-placeholder img { opacity:1 }

.component-banner.layout-grid[data-hover-image="true"] .item > a { display:block; position:relative } 

/*=====================================================
SLIDER
======================================================*/
.component-banner.layout-slider { }
.component-banner.layout-slider .slick-slide { padding:0 1rem; display:flex; flex-direction:column; justify-content:center }
.component-banner.layout-slider .slick-list { display:flex !important; }
.component-banner.layout-slider .slick-track { display:flex; align-items:stretch; justify-content:center;   }
.component-banner.layout-slider .slick-track .slick-slide { float:none; box-sizing: border-box; }
.component-banner.layout-slider .slick-arrow-controls {  }
.component-banner.layout-slider .slick-arrow-controls .slick-arrow {
    position: absolute;
    left: 0rem;
    top: 0.25rem;
    bottom:0.25rem;
    z-index: 1;
    width: 2rem;
    padding: 0;
    border: none;
    font-size: 1.25rem;
    line-height: 3rem;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    overflow: hidden;
    transition:all .2s linear;
}

.component-banner.layout-slider .slick-arrow-controls .prev { }
.component-banner.layout-slider .slick-arrow-controls .slick-arrow.next{ left: auto; right: 0rem; }
.component-banner.layout-slider .slick-arrow-controls .slick-arrow.pp{ left: auto; right: 0rem !important; }
.component-banner.layout-slider:focus .slick-arrow-controls .slick-arrow.prev,
.component-banner.layout-slider:focus-within .slick-arrow-controls .slick-arrow.prev,
.component-banner.layout-slider:active .slick-arrow-controls .slick-arrow.prev,
.component-banner.layout-slider:hover .slick-arrow-controls .slick-arrow.prev{ left:0rem; }
.component-banner.layout-slider:focus .slick-arrow-controls .slick-arrow.next,
.component-banner.layout-slider:focus-within .slick-arrow-controls .slick-arrow.next,
.component-banner.layout-slider:active .slick-arrow-controls .slick-arrow.next,
.component-banner.layout-slider:hover .slick-arrow-controls .slick-arrow.next{ right:0rem; }
.component-banner.layout-slider:focus .slick-arrow-controls .slick-arrow.pp,
.component-banner.layout-slider:focus-within .slick-arrow-controls .slick-arrow.pp,
.component-banner.layout-slider:active .slick-arrow-controls .slick-arrow.pp,
.component-banner.layout-slider:hover .slick-arrow-controls .slick-arrow.pp{ right:0rem !important; }

.component-banner.layout-carousel .item img { max-width:100% }

.component-banner.layout-flex { overflow:visible }
.component-banner.layout-flex .item { flex:1; align-self:center }
.component-banner.layout-flex .item img { max-width:100% }
.component-banner.layout-flex .item a { display:block }

/* STACKED CAROUSEL LAYOUT */
.component-banner.layout-stacked-carousel .carousel .carousel-indicators { position:static }
.component-banner.layout-stacked-carousel .carousel .carousel-indicators [data-bs-target] { background-color:var(--bs-primary) }
.component-banner.layout-stacked-carousel .aside-carousel .carousel-indicators [data-bs-target] { height:auto; box-sizing:border-box; text-indent:initial; background:transparent; opacity:1 }
.component-banner.layout-stacked-carousel .aside-carousel .carousel-indicators .active[data-bs-target] { color:#fff; background-color:var(--bs-primary) }
.component-banner.layout-stacked-carousel .carousel-control-pp { position:absolute; top:0; right:0; z-index:2; display:flex; align-items:center; justify-content:center; width:3rem; height:3rem; padding:0; color:#fff; background:none; border:0; opacity:.5; transition:all .15s; text-decoration:none }
.component-banner.layout-stacked-carousel .carousel-control-pp:focus,
.component-banner.layout-stacked-carousel .carousel-control-pp:hover { color:#fff; outline:0; opacity:.9; background:none }

@media only screen and (min-width:768px) {
    .component-banner.layout-stacked-carousel .carousel .carousel-indicators,
    .component-banner.layout-stacked-carousel .carousel .carousel-item .item-title { display:none }
    .component-banner.layout-slider .slick-arrow-controls .slick-arrow.next{ left: auto; right: -2rem; }
    .component-banner.layout-slider .slick-arrow-controls .slick-arrow.pp{ left: auto; right: -2rem !important; }
    .component-banner.layout-slider .slick-arrow-controls .prev{right:auto;left:-2rem;}
}

/* CAROUSEL LAYOUT */   
.component-banner.layout-carousel .carousel .carousel-control-pp {position: absolute;z-index: 2;bottom: 0;left:0;}