.product-flex {
    display:flex;
    flex-wrap:wrap;
    /* justify-content: space-between; */
}

.product-flex .product{
    width:calc(33% - 80px);
    text-align: center;
    text-decoration: none;
    border-radius:4px;
    transition:0.2s;
    margin:5px 20px;
    padding:20px;
    position: relative;
    background:#f9f9f9
}

.product-flex .product:hover{
    background:#e9e9e9;

}

form.product{
    cursor: pointer;
}

.product img{
    width:100px;
}

.product .title {
    font-weight:700;
    color:var(--accent-1);
}

.product .text{
    color:#000;
    margin: 20px;
    padding-bottom:10px;
}


.product hr{
    background:var(--accent-2);
    height:2px;
    border:0;
    width:60%;
    position: absolute;
    bottom:0;
    left: 20%;
    transition:0.2s;
}


.product:hover hr{
    width:80%;
    left:10%;
}


@media (max-width:1000px){
    .product-flex .product{
        width:calc(33% - 40px);
    }
}

@media (max-width:680px){
    .product-flex .product{
        width:calc(50% - 40px);
    }
}

@media (max-width:450px){
    .product-flex .product{
        width:calc(100% - 40px);
    }
}