/********************************************
Componente: Inicio > banner categorias
*********************************************/

.bs-categories{
    margin-top:1rem;
    margin-bottom:1rem;
}

.bs-categories__item{
    position:relative;
    height:100%;
    display:flex;
    justify-content:center;
    transition:.1s all ease;
}
.bs-categories__item .bs-img-square{
    border-radius:var(--default-border-radius,0);
    overflow:hidden;
    margin-bottom:1.5rem;
}
.bs-categories__title{
    text-align:
    center;
    font-weight:
    var(--font-bold);
    font-size:1rem;
    background:
    var(--banner-title-bg,var(--primary-color));
    color:
    var(--banner-title-color,var(--primary-contrast));
    padding:1rem;
    margin:0 1rem;
    z-index:10;
    border-radius: 7px;
    position:
    absolute;
    bottom:0;
    min-width:50%;
    font-family: var(--font-body-family);
}

/* hover category */ 
.bs-categories__item *{
    transition:.5s all ease;
}
.bs-categories__item:hover .bs-img-square picture{
    transform: scale(1.2) rotate(5deg);
}
.bs-categories__item:hover .bs-categories__title{
    background:var(--banner-hover-title-bg,var(--primary-hover-color));
    color:var(--banner-hover-title-color,var(--primary-hover-contrast));
}



@media screen and (min-width:576px){
   .bs-categories{font-size: var(--title-size-sm,var(--title-size,.75rem));}
}
@media screen and (min-width:768px){
   .bs-categories{font-size: var(--title-size-md,var(--title-size-sm,var(--title-size,.75rem))); }
}
@media screen and (min-width:992px){
   .bs-categories{font-size: var(--title-size-lg,var(--title-size-md,var(--title-size-sm,var(--title-size,.8rem)))); }
}
@media screen and (min-width:1200px){
   .bs-categories{font-size: var(--title-size-xl,var(--title-size-lg,var(--title-size-md,var(--title-size-sm,var(--title-size,.85rem)))));}
}


/* banner de coleccion */

.bs-banners{
    margin:  calc(var(--gap,1rem)/2 * -1) ;
    padding-bottom: var(--gap,1rem);
}
.bs-banners__item{
    padding:calc(var(--gap,1rem)/2);
}

.bs-banners__picture{
    border-radius: var(--default-border-radius);
    overflow:hidden;
    display:block;
}