/**********************
    Banners
***********************/
.bs-banner-grid__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bs-banner-grid__info{
    background: #0d2f64;
    padding:1rem;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    background-size: 100%;
}
.bs-banner-grid__info .btn{
    white-space:nowrap;
}
.bs-banner-grid__title{
    font-size: 1.4rem;
    color: var(--home-title-color);
}

.bs-banner-grid__child{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:1rem;
    
    
}
.bs-banner-grid {
    display: grid;
    gap: 1rem;
    margin-bottom:2rem;
    grid-template-columns: 1fr;
}
.bs-banner-grid__image{
        position:relative;
}
.bs-banner-grid__image::after{
    content:" ";
    display:block;
    margin-bottom:50%; /* alto mitad del ancho*/
}
.bs-banner-grid__picture{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
    }
    

section.bs-banner-grid.bs-banner-grid-items-4 img.bs-banner-grid__img {
    border: solid 1px #ffffff;
    border-bottom: 0px;
    border-radius: 15px 15px 0px 0px;
}    
}
section.bs-banner-grid.bs-banner-grid-items-4 .bs-banner-grid__img {
    border-radius: 16px 16px 0px 0px;
}    
    

@media screen and (min-width:996px){

    .bs-banner-grid-items-1{
        grid-template-columns: 1fr;
    }
    .bs-banner-grid-items-2{
        grid-template-columns: repeat(2, 1fr);
    }
    .bs-banner-grid-items-3,
    .bs-banner-grid-items-4,
    .bs-banner-grid-items-5, 
    .bs-banner-grid-items-6,
    .bs-banner-grid-items-7,
    .bs-banner-grid-items-8{
        grid-template-columns: repeat(4, 1fr);
    }
    
    .bs-banner-grid__image::after{
        margin-bottom:100%; /*imagen cuadrada ancho = alto */
    }
    
    .bs-banner-grid__img{
        position:absolute;
    }
    .bs-banner-grid-items-3 .bs-banner-grid__child-1,
    .bs-banner-grid-items-4 .bs-banner-grid__child-1,
    .bs-banner-grid-items-5 .bs-banner-grid__child-1{
        grid-row: 1/3;
        grid-column: 1/3
    }
    .bs-banner-grid-items-3 .bs-banner-grid__image__child-1,
    .bs-banner-grid-items-4 .bs-banner-grid__image__child-1,
    .bs-banner-grid-items-5 .bs-banner-grid__image__child-1{
        height:100%;
    }
    
    .bs-banner-grid-items-3 .bs-banner-grid__image__child-1::after,
    .bs-banner-grid-items-4 .bs-banner-grid__image__child-1::after,
    .bs-banner-grid-items-5 .bs-banner-grid__image__child-1::after{
        margin-bottom:auto;
    }
    .bs-banner-grid-items-3 .bs-banner-grid__image__child-2,
    .bs-banner-grid-items-3 .bs-banner-grid__image__child-3,
    .bs-banner-grid-items-4 .bs-banner-grid__image__child-4,
    .bs-banner-grid-items-6 .bs-banner-grid__image__child-1,
    .bs-banner-grid-items-6 .bs-banner-grid__image__child-4,
    .bs-banner-grid-items-7 .bs-banner-grid__image__child-1{
        grid-column-end: span 2;
    }
    .bs-banner-grid-items-3 .bs-banner-grid__image__child-2::after,
    .bs-banner-grid-items-3 .bs-banner-grid__image__child-3::after,
    .bs-banner-grid-items-4 .bs-banner-grid__image__child-4::after,
    .bs-banner-grid-items-6 .bs-banner-grid__image__child-1::after,
    .bs-banner-grid-items-6 .bs-banner-grid__image__child-4::after,
    .bs-banner-grid-items-7 .bs-banner-grid__image__child-1::after{
        margin-bottom:50%;
    }
    
    .bs-banner-grid-items-3 .bs-banner-grid__child,
    .bs-banner-grid-items-4 .bs-banner-grid__child-4,
    .bs-banner-grid-items-6 .bs-banner-grid__child-1,
    .bs-banner-grid-items-6 .bs-banner-grid__child-4,
    .bs-banner-grid-items-7 .bs-banner-grid__child-1{
        grid-column-end: span 2;
    }
}