:root {
    /* Количество колонок */

    /* Ширина колонки */
}
.grid {
    width: 100%;
    box-sizing: border-box;

    max-width: 1188px;
    margin: 0 auto;
    padding: 0 12px;
}
@media (min-width: 375px) {
.grid {
        padding: 0 16px
}
    }
@media (min-width: 412px) {
.grid {
        padding: 0 20px
}
    }
@media (min-width: 768px) {
.grid {
        padding: 0 32px
}
    }
@media (min-width: 1280px) {
.grid {
        padding: 0 48px
}
    }
.grid__row {
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;

    margin: 0 auto;

    box-sizing: border-box;

    margin-left: -8px;
    margin-right: -8px;
}
@media (min-width: 1280px) {
.grid__row {
        margin-left: -12px;
        margin-right: -12px
}
    }
.grid__col {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;

    padding-left: 8px;
    padding-right: 8px;
}
@media (min-width: 1280px) {
.grid__col {
        padding-left: 12px;
        padding-right: 12px
}
    }
.grid__col-1, .grid__col-1, .grid__offset-1 {
        flex: 0 0 auto;

        box-sizing: border-box;
    }
.grid__col-1 {
        flex-basis: 8.33333%;
        max-width: 8.33333%;

        padding-left: 8px;
        padding-right: 8px;
    }
@media (min-width: 1280px) {
.grid__col-1 {
            padding-left: 12px;
            padding-right: 12px
    }
        }
.grid__offset-1 {
        margin-left: 8.33333%;
    }
.grid__col-2, .grid__col-2, .grid__offset-2 {
        flex: 0 0 auto;

        box-sizing: border-box;
    }
.grid__col-2 {
        flex-basis: 16.66666%;
        max-width: 16.66666%;

        padding-left: 8px;
        padding-right: 8px;
    }
@media (min-width: 1280px) {
.grid__col-2 {
            padding-left: 12px;
            padding-right: 12px
    }
        }
.grid__offset-2 {
        margin-left: 16.66666%;
    }
.grid__col-3, .grid__col-3, .grid__offset-3 {
        flex: 0 0 auto;

        box-sizing: border-box;
    }
.grid__col-3 {
        flex-basis: 24.99999%;
        max-width: 24.99999%;

        padding-left: 8px;
        padding-right: 8px;
    }
@media (min-width: 1280px) {
.grid__col-3 {
            padding-left: 12px;
            padding-right: 12px
    }
        }
.grid__offset-3 {
        margin-left: 24.99999%;
    }
.grid__col-4, .grid__col-4, .grid__offset-4 {
        flex: 0 0 auto;

        box-sizing: border-box;
    }
.grid__col-4 {
        flex-basis: 33.33332%;
        max-width: 33.33332%;

        padding-left: 8px;
        padding-right: 8px;
    }
@media (min-width: 1280px) {
.grid__col-4 {
            padding-left: 12px;
            padding-right: 12px
    }
        }
.grid__offset-4 {
        margin-left: 33.33332%;
    }
.grid__col-5, .grid__col-5, .grid__offset-5 {
        flex: 0 0 auto;

        box-sizing: border-box;
    }
.grid__col-5 {
        flex-basis: 41.66665%;
        max-width: 41.66665%;

        padding-left: 8px;
        padding-right: 8px;
    }
@media (min-width: 1280px) {
.grid__col-5 {
            padding-left: 12px;
            padding-right: 12px
    }
        }
.grid__offset-5 {
        margin-left: 41.66665%;
    }
.grid__col-6, .grid__col-6, .grid__offset-6 {
        flex: 0 0 auto;

        box-sizing: border-box;
    }
.grid__col-6 {
        flex-basis: 49.99998%;
        max-width: 49.99998%;

        padding-left: 8px;
        padding-right: 8px;
    }
@media (min-width: 1280px) {
.grid__col-6 {
            padding-left: 12px;
            padding-right: 12px
    }
        }
.grid__offset-6 {
        margin-left: 49.99998%;
    }
.grid__col-7, .grid__col-7, .grid__offset-7 {
        flex: 0 0 auto;

        box-sizing: border-box;
    }
.grid__col-7 {
        flex-basis: 58.33331%;
        max-width: 58.33331%;

        padding-left: 8px;
        padding-right: 8px;
    }
@media (min-width: 1280px) {
.grid__col-7 {
            padding-left: 12px;
            padding-right: 12px
    }
        }
.grid__offset-7 {
        margin-left: 58.33331%;
    }
.grid__col-8, .grid__col-8, .grid__offset-8 {
        flex: 0 0 auto;

        box-sizing: border-box;
    }
.grid__col-8 {
        flex-basis: 66.66664%;
        max-width: 66.66664%;

        padding-left: 8px;
        padding-right: 8px;
    }
@media (min-width: 1280px) {
.grid__col-8 {
            padding-left: 12px;
            padding-right: 12px
    }
        }
.grid__offset-8 {
        margin-left: 66.66664%;
    }
.grid__col-9, .grid__col-9, .grid__offset-9 {
        flex: 0 0 auto;

        box-sizing: border-box;
    }
.grid__col-9 {
        flex-basis: 74.99997%;
        max-width: 74.99997%;

        padding-left: 8px;
        padding-right: 8px;
    }
@media (min-width: 1280px) {
.grid__col-9 {
            padding-left: 12px;
            padding-right: 12px
    }
        }
.grid__offset-9 {
        margin-left: 74.99997%;
    }
.grid__col-10, .grid__col-10, .grid__offset-10 {
        flex: 0 0 auto;

        box-sizing: border-box;
    }
.grid__col-10 {
        flex-basis: 83.3333%;
        max-width: 83.3333%;

        padding-left: 8px;
        padding-right: 8px;
    }
@media (min-width: 1280px) {
.grid__col-10 {
            padding-left: 12px;
            padding-right: 12px
    }
        }
.grid__offset-10 {
        margin-left: 83.3333%;
    }
.grid__col-11, .grid__col-11, .grid__offset-11 {
        flex: 0 0 auto;

        box-sizing: border-box;
    }
.grid__col-11 {
        flex-basis: 91.66663%;
        max-width: 91.66663%;

        padding-left: 8px;
        padding-right: 8px;
    }
@media (min-width: 1280px) {
.grid__col-11 {
            padding-left: 12px;
            padding-right: 12px
    }
        }
.grid__offset-11 {
        margin-left: 91.66663%;
    }
.grid__col-12, .grid__col-12, .grid__offset-12 {
        flex: 0 0 auto;

        box-sizing: border-box;
    }
.grid__col-12 {
        flex-basis: 99.99996%;
        max-width: 99.99996%;

        padding-left: 8px;
        padding-right: 8px;
    }
@media (min-width: 1280px) {
.grid__col-12 {
            padding-left: 12px;
            padding-right: 12px
    }
        }
.grid__offset-12 {
        margin-left: 99.99996%;
    }

/*# sourceMappingURL=grid.css.map */
