
//---------- MEDIA BREAKPOINTS ----------//
@mixin media-between($lower, $upper, $breakpoints: $grid-breakpoints) {
   @include media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
      @content;
   }
}

@mixin media-up($name, $breakpoints: $grid-breakpoints) {
   @include media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
      @content;
   }
}

@mixin media-down($name, $breakpoints: $grid-breakpoints) {
   @include media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
      @content;
   }
}

@mixin media-only($name, $breakpoints: $grid-breakpoints) {
   @include media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
      @content;
   }
}

// grid-5

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths,
.col-xxl-5ths {
   position: relative;
   min-height: 1px;
   padding-right: 10px;
   padding-left: 10px;
}

@each $breakpoint, $size in $grid-breakpoints {
   @media screen and (min-width: $size) {
      .col-#{$breakpoint}-5ths {
         width: 20%;
         float: left;
      }
   }
}
