.col--container{
   width: 100%;
   margin-bottom: 30px;
}

.row{
   display: flex;
   flex-wrap: wrap;

   &:after{
       content: '';
       display: table;
       clear: both;
   }

   &__align{
       &--top{
           align-items: flex-start;
       }

       &--center{
           align-items: center;
       }

       &--bottom{
           align-items: flex-end;
       }
   }

   &__justify{
       &--left{
           justify-content: flex-start;
       }

       &--right{
           justify-content: flex-end;
       }

       &--center{
           justify-content: center;
           text-align: center;
       }

       &--between, &--around, &--evenly{
           &:after{
               display: none;
           }
       }

       &--between{
           justify-content: space-between;
       }

       &--around{
           justify-content: space-around;
       }

       &--evenly{
           justify-content: space-evenly;
       }
   }
}

.col,
.col-1, 
.col-2, 
.col-3, 
.col-4, 
.col-5, 
.col-6, 
.col-7, 
.col-8, 
.col-9, 
.col-10, 
.col-11, 
.col-12{
   padding: 10px $col_padding;
   margin: $col_margin;
}

.col{
   @include col_width;
}