:root {
    --gap: 20px
}

.product-thumb {
    position: relative;
}

#sub_cat {
    padding: 0;
    margin-bottom: 30px;
}

#filtre {
    margin-bottom: 15px;
}

#sub_cat li {
    list-style-type: none
}

.kutular {
    display: grid;
    grid-gap: 15px
}

#sub_cat .kutu {
    display: block;
    border: 1px solid #ddd;
    background: #fff
}

.kutu_text {
    padding: 10px;
    color: #333;
    font-size: 14px;
    text-align: center;
}

#sub_cat .kutu:hover {
    border: 1px solid #eee;
    background: #eee
}

.kutu_img {
    max-width: 100%;
    overflow: hidden;
    text-align: center;
}
.kutu_img:has(i){
    padding-top: 20px;
}
.kutu_img i{
    font-size: 50px;
    color: #333;
}

.kutu_img img {
    width: 100%;
    transition: transform .3s
}

.kutu_img img:hover {
    opacity: .8;
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.kutu-lg-10 {
    grid-template-columns: repeat(10, 1fr)
}

.kutu-lg-8 {
    grid-template-columns: repeat(8, 1fr)
}

.kutu-lg-7 {
    grid-template-columns: repeat(7, 1fr)
}

.kutu-lg-6 {
    grid-template-columns: repeat(6, 1fr)
}

.kutu-lg-5 {
    grid-template-columns: repeat(5, 1fr)
}

.kutu-lg-4 {
    grid-template-columns: repeat(4, 1fr)
}

.kutu-lg-3 {
    grid-template-columns: repeat(3, 1fr)
}

.kutu-lg-2 {
    grid-template-columns: repeat(2, 1fr)
}

.kutu-lg-1 {
    grid-template-columns: 1fr
}

.col-lg-tal {
    text-align: left;
}

.col-lg-tac {
    text-align: center;
}

.col-lg-tar {
    text-align: right;
}

.col-lg-taj {
    text-align: justify;
}

@media (max-width: 1200px) {
    .ortala {
        width: 100%
    }
    .kutular {
        grid-gap: 12px
    }
    .kutu-md-10 {
        grid-template-columns: repeat(10, 1fr)
    }
    .kutu-md-8 {
        grid-template-columns: repeat(8, 1fr)
    }
    .kutu-md-7 {
        grid-template-columns: repeat(7, 1fr)
    }
    .kutu-md-6 {
        grid-template-columns: repeat(6, 1fr)
    }
    .kutu-md-5 {
        grid-template-columns: repeat(5, 1fr)
    }
    .kutu-md-4 {
        grid-template-columns: repeat(4, 1fr)
    }
    .kutu-md-3 {
        grid-template-columns: repeat(3, 1fr)
    }
    .kutu-md-2 {
        grid-template-columns: repeat(2, 1fr)
    }
    .kutu-md-1 {
        grid-template-columns: 1fr
    }
    .col-md-tal {
        text-align: left;
    }
    .col-md-tac {
        text-align: center;
    }
    .col-md-tar {
        text-align: right;
    }
    .col-md-taj {
        text-align: justify;
    }
}

@media (max-width: 800px) {
    .kutular {
        grid-gap: 10px
    }
    .kutu-sm-10 {
        grid-template-columns: repeat(10, 1fr)
    }
    .kutu-sm-8 {
        grid-template-columns: repeat(8, 1fr)
    }
    .kutu-sm-7 {
        grid-template-columns: repeat(7, 1fr)
    }
    .kutu-sm-6 {
        grid-template-columns: repeat(6, 1fr)
    }
    .kutu-sm-5 {
        grid-template-columns: repeat(5, 1fr)
    }
    .kutu-sm-4 {
        grid-template-columns: repeat(4, 1fr)
    }
    .kutu-sm-3 {
        grid-template-columns: repeat(3, 1fr)
    }
    .kutu-sm-2 {
        grid-template-columns: repeat(2, 1fr)
    }
    .kutu-sm-1 {
        grid-template-columns: 1fr
    }
    .col-sm-tal {
        text-align: left;
    }
    .col-sm-tac {
        text-align: center;
    }
    .col-sm-tar {
        text-align: right;
    }
    .col-sm-taj {
        text-align: justify;
    }
}

@media (max-width: 500px) {
    .kutular {
        grid-gap: 7px
    }
    .kutu-xs-10 {
        grid-template-columns: repeat(10, 1fr)
    }
    .kutu-xs-8 {
        grid-template-columns: repeat(8, 1fr)
    }
    .kutu-xs-7 {
        grid-template-columns: repeat(7, 1fr)
    }
    .kutu-xs-6 {
        grid-template-columns: repeat(6, 1fr)
    }
    .kutu-xs-5 {
        grid-template-columns: repeat(5, 1fr)
    }
    .kutu-xs-4 {
        grid-template-columns: repeat(4, 1fr)
    }
    .kutu-xs-3 {
        grid-template-columns: repeat(3, 1fr)
    }
    .kutu-xs-2 {
        grid-template-columns: repeat(2, 1fr)
    }
    .kutu-xs-1 {
        grid-template-columns: 1fr
    }
    .col-xs-tal {
        text-align: left;
    }
    .col-xs-tac {
        text-align: center;
    }
    .col-xs-tar {
        text-align: right;
    }
    .col-xs-taj {
        text-align: justify;
    }
}

@media (max-width: 300px) {
    .kutular {
        grid-gap: 5px
    }
    .kutu-ms-10 {
        grid-template-columns: repeat(10, 1fr)
    }
    .kutu-ms-8 {
        grid-template-columns: repeat(8, 1fr)
    }
    .kutu-ms-7 {
        grid-template-columns: repeat(7, 1fr)
    }
    .kutu-ms-6 {
        grid-template-columns: repeat(6, 1fr)
    }
    .kutu-ms-5 {
        grid-template-columns: repeat(5, 1fr)
    }
    .kutu-ms-4 {
        grid-template-columns: repeat(4, 1fr)
    }
    .kutu-ms-3 {
        grid-template-columns: repeat(3, 1fr)
    }
    .kutu-ms-2 {
        grid-template-columns: repeat(2, 1fr)
    }
    .kutu-ms-1 {
        grid-template-columns: 1fr
    }
    .col-ms-tal {
        text-align: left;
    }
    .col-ms-tac {
        text-align: center;
    }
    .col-ms-tar {
        text-align: right;
    }
    .col-ms-taj {
        text-align: justify;
    }
}