=size-xs
    @media (max-width: 640px)
        &
            @content

=size-sm
    @media (min-width: 641px) and (max-width: 900px)
        &
            @content

=size-md
    @media (min-width: 901px) and (max-width: 1024px)
        &
            @content

=size-lg
    @media (min-width: 1025px)
        &
            @content

=size-xs-sm
    @media (max-width: 900px)
        &
            @content

=size-md-lg
    @media (min-width: 901px)
        &
            @content

.container
    max-width: 1200px
    margin: 0 auto
    padding: 0 40px

    +size-xs
        padding: 0 20px

.container-main
    padding-bottom: 50px

.row
    +clearfix
    display: flex
    position: relative
    margin: 0 -10px

.col
    @extend %prevent-children-margin
    box-sizing: border-box
    float: left
    padding: 0 10px

@for $width from 1 to 12
    .col-#{$width}
        @extend .col
        width: $width / 12 * 100%

    .offset-#{$width}
        margin-left: $width / 12 * 100%