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

.bs-categories{
    margin-top:1rem;
    margin-bottom:1rem;
    
}
.bs-categories__item{
    border-radius:var(--banner-border-radius,0);
    overflow:hidden;
    display:block;
}

.bs-categories__title{
    text-transform:var(--banner-title-transform, uppercase);
    text-align:center;
    position:absolute;
    font-size:var(--banner-title-font-size);
    width:100%;
    background:var(--banner-title-bg, black);
    color:var(--banner-title-color, white);
    z-index:100;
    bottom:0;
    padding:.25em 1em;
    font-weight: var(--font-bold);
}

@media (hover: hover){
    .bs-categories__title{
        width:auto;
        bottom:50%;
        left:50%;
        transform: translate(-50%, 50%);
        border-radius: 5px;
        transition: .3s;
    }
    .bs-categories__item:hover .bs-categories__title{
        display:block;
    }
    .bs-categories__item:hover .bs-categories__img::after{
        content:"";
        left:0;
        width:100%;
        height:100%;
        background:black;
        opacity:.4;
        transition: 0.9s;
    }
}