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

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

.bs-categories__item {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: var(--default-border-radius,0);
    height: 90%;
    background: var(--categories-bg, var(--primary-color));
    padding: 1rem;
    box-shadow: 2px 2px 4px 2px rgb(0 0 0 / 20%);
    margin-top: 6px;
    margin-bottom: 9px;
}
.bs-categories__item:hover{
    opacity:0.6;
    transition:.3s
}
.bs-categories .btn{
    font-size:1em;
    margin-top:1rem;
}
.bs-categories__title{
    font-weight:var(--font-bold);
    text-align:center;
    color: var(--secondary-color);
    font-size:0.8rem;
    padding-top:1rem;
    margin:0;
    display:flex;
    height:100%;
}


@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;
}
.bs-banners__picture:hover{
   transform: scale(1.02);
   transition: 0.8s ease;
}