.container {
    max-width: 1200px;
    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 {
    float: left;
    display: block;
    margin-left: 12px;
    margin-right: 12px;
    min-height: 1px;
}

.grid-1 {
    margin-left: 0;
    width: calc(8.333% - 24px);
}

.grid-2 {
    width: calc(16.666% - 24px);
}

.grid-3 {
    width: calc(25% - 24px);
}

.grid-4 {
    width: calc(33.333% - 24px);
}

.grid-5 {
    width: calc(41.666% - 24px);
}

.grid-6 {
    width: calc(50% - 24px);
}

.grid-7 {
    width: calc(58.333% - 24px);
}

.grid-8 {
    width: calc(66.666% - 24px);
}

.grid-9 {
    width: calc(75% - 24px);
}

.grid-10 {
    width: calc(83.333% - 24px);
}

.grid-11 {
    width: calc(91.666% - 24px);
}

.grid-12 {
    margin-right: 0;
    width: calc(100% - 24px);
}

@media (max-width: 739px) {
    .container {
        max-width: 360px;
    }

    .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;
        margin-left: 0px;
        margin-right: 0px;
        width: 100%;
    }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    .container {
        max-width: 600px;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
}