.category-box{display: block; position: relative; width: 100%; padding: 0; overflow: hidden; background-color: #fff; margin: 10px auto; color: #F7BE00; text-decoration: none; border-radius: 10px;}
.category-box::before {display: block; content: ''; padding-top: 133.333333%;}
.category-box img{display:block; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: contain; transform: translate(-50%, -50%); transition: .15s all linear; opacity: 1; z-index: 1}

.row-bp {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
}

.col-bp {
    position: relative;
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
@media (min-width: 768px){
    .col-bp {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .row-post-bp .col-bp{
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (min-width: 992px){
    .col-bp {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-post-bp .col-bp{
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}
@media (min-width: 1200px){
    .col-bp {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-post-bp .col-bp{
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}