.container {
    max-width: 960px;
    margin: 0 auto;
}
.container::after, .container::before {
    content: "";
    display: table;
    clear: both;
}
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-mobile-6 {
    float: left;
    display: block;
    min-height: 1px;
    margin-left: 10px;
    margin-right: 10px;
} 
.grid-1 {
    width: calc(8.333% - 20px);
}
.grid-2 {
    width: calc(16.666% - 20px);
}
.grid-3 {
    width: calc(25% - 20px);
}
.grid-4 {
    width: calc(33.333% - 20px);
}
.grid-5 {
    width: calc(41.666% - 20px);
}
.grid-6 {
    width: calc(50% - 20px);
}
.grid-7 {
    width: calc(58.333% - 20px);
}
.grid-8 {
    width: calc(66.666% - 20px);
}
.grid-9 {
    width: calc(75% - 20px);
}
.grid-10 {
    width: calc(83.333% - 20px);
}
.grid-11 {
    width: calc(91.666% - 20px);
}
.grid-12 {
    width: calc(100% - 20px);
}
.grid-mobile-6 {
    width: calc(50% - 20px);
}
.row, .row-mobile {
    margin-left: -10px;
    margin-right: -10px;
}
.row::after, .row::before, .row-mobile::after, .row-mobile::before {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 739px) {
    .container {
        max-width: 300px;
    }
    .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
        float: none;
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    } 
    .row {
        margin-left: 0px;
        margin-right: 0px;
    }
}