/**
* --------------------------------------------------
* Banners CSS
* --------------------------------------------------
* v1.1.0
* Ready classes for banners with content.
* ==================================================
* @How to use:
* 
* -- Separate Content --
* 
* <div class="banner">
*   <img src="..." />
*   <div class="banner-layer">
*       <h3 class="center">I am a text</h3>
*       <button class="bottom right">Click Me</button>
*   </div>
* </div>
* 
* -- ALSO Wrapped Content --
* 
* <div class="banner">
*   <img src="..." />
*   <div class="banner-layer">
*       <div class="middle bottom">
*           <h3>I am a text</h3>
*           <button>Click Me</button>
*       </div>
*   </div>
* </div>
* 
* For other placements use custom class
* OR "style" attribute: top, left, right, bottom
* --------------------------------------------------
*/

:root {
    /* Font family */
    --banner--font-family--base: inherit;
    --banner--font-family--heading: var(--banner--font-family--base);
    --banner--font-family--button: var(--banner--font-family--base);
    --banner--font-size--base: 1.6rem;
    --banner--font-size--heading: var(--banner--font-size--base);
    --banner--font-size--button: var(--banner--font-size--base);

    /* positioning space */
    --banner-leyer--position-top: 3.5rem;
    --banner-leyer--position-left: 3.5rem;
}

.banner {
    position: relative;
    font-size: 0;
    padding: 0;
}

.banner-layer {
    display: block;
    position: absolute;
    top: var(--banner-leyer--position-top);
    left: var(--banner-leyer--position-left);
    width: calc(100% - var(--banner-leyer--position-left) * 2); /** total width - left * 2 **/
    height: calc(100% - var(--banner-leyer--position-top) * 2); /** total height - top * 2 **/
    font-family: var(--banner--font-family--base);
    font-size: var(--banner--font-size--base);
}

.banner-layer .top,
.banner-layer .bottom,
.banner-layer .left,
.banner-layer .right,
.banner-layer .middle,
.banner-layer .middle-vertical,
.banner-layer .center {
    display: inline-block;
    position: absolute;
    max-width: max-content;
    width: 100%;
}

.banner-layer .top {
    top: 0;
}

.banner-layer .bottom {
    bottom: 0;
}

.banner-layer .left {
    left: 0;
}

.banner-layer .right {
    right: 0;
}

.banner-layer .middle {
    left: 50%;
    transform: translateX(-50%);
}

.banner-layer .middle-vertical {
    top: 50%;
    transform: translateY(-50%);
}

.banner-layer .center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.banner-layer, 
.banner-layer h1, 
.banner-layer h2, 
.banner-layer h3, 
.banner-layer a {
    color: #000;
    margin: 0;
}

.banner-heading {
    font-family: var(--banner--font-family--heading);
    font-size: var(--banner--font-size--heading);
    width: 48%;
}

.banner-button {
    font-family: var(--banner--font-family--button);
    font-size: var(--banner--font-size--button);
}

.banner-grid {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: center;
    margin: 0 auto;
}

.banner-grid > .banner {
    /*flex-basis: auto;*/
    /*width: auto;*/
    padding: 5px 5px;
}


.banner-heading {
    top: 0;
    transform: translateY(-78%);
}

@media(max-width: 767px){
    .button.button--primary {
        transform: translateY(50%);
    }
}
@media(max-width: 991px){
    .banner .banner-image.img-fluid{
        height: 500px;
    }
}