/* =====================================================
   GRID
===================================================== */

.molapro-grid-personalizados{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;

    margin:40px 0;

}

/* =====================================================
   CARD
===================================================== */

.produto-grid-card{

    position:relative;
    overflow:hidden;
    aspect-ratio:1;

}

.produto-grid-card a{

    display:block;
    width:100%;
    height:100%;
    color:#fff;
    text-decoration:none;

}

.produto-grid-card img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    transition:.45s;

}

/* =====================================================
   OVERLAY
===================================================== */

.produto-grid-overlay{

    position:absolute;
    inset:0;

    display:flex;
    justify-content:space-between;
    align-items:flex-end;

    padding:18px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.65),
        rgba(0,0,0,0) 55%
    );

    transition:.35s;

}

.produto-grid-info{

    display:flex;
    flex-direction:column;

}

.produto-grid-info h3{

    margin:0;

    color:#fff;

    font-size:15px;

    font-weight:500;

    text-transform:uppercase;

}

.produto-grid-info span{

    margin-top:6px;

    font-size:11px;

    letter-spacing:.5px;

    color:#ffffff;

    opacity:0;

    transform:translateY(8px);

    transition:.3s;

}

.produto-grid-seta{

    font-size:24px;

    color:#ffffff;

    opacity:0;

    transform:translateY(8px);

    transition:.3s;

}

/* =====================================================
   HOVER
===================================================== */

.produto-grid-card:hover img{

    transform:scale(1.05);

}

.produto-grid-card:hover .produto-grid-overlay{

    background:rgba(201,120,32,.82);

}

.produto-grid-card:hover .produto-grid-info span,
.produto-grid-card:hover .produto-grid-seta{

    opacity:1;

    transform:none;

}

/* =====================================================
   RESPONSIVO
===================================================== */

@media(max-width:1024px){

    .molapro-grid-personalizados{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:767px){

    .molapro-grid-personalizados{

        grid-template-columns:1fr;

    }

}