
/* Banners */
.card-banner{display:flex; position:relative; overflow:hidden;  
    background-color:#fff; background-size: cover; background-position:center center;  border-radius:$border-radius;
    .card-body{background-size: cover; position:relative; z-index:10}
    
    .caption{ background-color:rgba(#000, .6); z-index:10; color:#fff;    }
    .caption.bottom{ bottom:0; left:0;  position:absolute;  width:100%; }
    .caption.top{ top:0; left:0; position:absolute;  width:100%; }
   
    .caption.left{ top:0; left:0; bottom:0; position:absolute;}

    .text-bottom{ position:absolute; left:0; bottom:0; left:0; z-index:10; width:100%; 
        padding:1rem; padding-top:2rem;  border-radius:0 0 $border-radius $border-radius;
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
        color: #fff;
    }
    
    .img-bg{
        position: absolute; right:0; bottom:0;
        mix-blend-mode: multiply; max-width:100%;
    }
}