.categories{
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(1,minmax(0,1fr));
}
.categories .categorie{
    padding: 10px;
}
.categories .categorie .cat.one{
    background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url('https://5.imimg.com/data5/LF/QS/DU/SELLER-37458601/loop-handle-bag-500x500.jpg');
}
.categories .categorie .cat.two{
    background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url('https://5.imimg.com/data5/ANDROID/Default/2021/2/ET/RB/JL/37458601/product-jpeg-500x500.jpg');
}
.categories .categorie .cat.three{
    background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url('https://rukminim1.flixcart.com/image/416/416/k7gikcw0/mask-respirator/h/e/g/3-ply-surgical-face-mask-with-earloop-great-for-air-pollution-original-imafpzzqyezzeggh.jpeg?q=70');
} 
.categories .categorie .cat{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 2em;
    color: white;
    cursor: pointer;
    transition: 0.3s;
}  
.categories .categorie .cat:hover{
    transform: translateY(-10px);
}
@media (min-width:992px) {
    .categories{
        grid-template-columns: repeat(3,minmax(0,1fr));
        transform: translateY(-5em);
    }
}