.container{ max-width: 1200px; margin: auto; padding: 0 1rem;}

.row{ display:flex; flex-flow: row wrap; margin: 0 -1rem;}

/* [class^="col-"]{ flex: 1 0 auto; padding: 0 1rem} */
.col-1{ flex-basis: 8.33%; max-width: 8.33%;}
.col-2{ flex-basis: 16.66%; max-width: 16.66%;}
.col-3{ flex-basis: 25%; max-width: 25%;}
.col-4{ flex-basis: 33.33%; max-width: 33.33%;}
.col-5{ flex-basis: 41.66%; max-width: 41.66%;}
.col-6{ flex-basis: 50%; max-width: 50%;}
.col-7{ flex-basis: 58.33%; max-width: 58.33%;}
.col-8{ flex-basis: 66.66%; max-width: 66.66%;}
.col-9{ flex-basis: 75%; max-width: 75%;}
.col-10{ flex-basis: 83.33%; max-width: 83.33%;}
.col-11{ flex-basis: 91.66%; max-width: 91.66%;}
.col-12{ flex-basis: 100%; max-width: 100%;}


.grid-box {
    position: relative;
    overflow: hidden;
}

.grid-title {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #0000003b;
}

.grid-title h4 {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
}

.grid-box img {
    transition: all 0.3s;
}

.grid-box:hover img {
    transform: scale(1.06);
}
.img-fluid{
    width:100%; height:auto;
}
@media screen and (max-width:656px){
    .gd-mt-17{
        margin-top: 17px;
    }
}