/*====== Varibles start =====*/
//Width, Height & Size (widtth & height) values in rem
$sizes: (
1: 0.063, 2: 0.125, 3: 0.188,
4: 0.25, 5: 0.313, 6: 0.375, 7: 0.438, 
8: 0.5, 9: 0.563, 10: 0.625, 
12: 0.75, 
16: 1, 18: 1.125, 
20: 1.25, 22: 1.375, 
24: 1.5, 25: 1.563, 26: 1.625, 
28: 1.75, 30: 1.875, 
32: 2, 
35: 2.188, 36: 2.25, 
40: 2.5, 45: 2.813, 
48: 3, 50: 3.125, 55: 3.438, 
56: 3.5, 
60: 3.75,
64: 4, 65: 4.063, 70: 4.375, 75: 4.688, 
80: 5, 85: 5.313, 90: 5.625, 95: 5.938, 
100: 6.25, 110: 6.875, 120: 7.5, 130: 8.125, 140: 8.75, 150: 9.375, 170: 10.625, 190: 11.875, 200: 12.5, 250: 15.625, 300: 18.75
);

//Values in %
$percentage-sizes: (0: 0%, 10: 10%, 25: 25%, 50: 50%, 75: 75%, 100: 100%);



.al{
    @each $key, $value in $sizes {
        //width
        &-w-#{$key} {
            width: $value+rem !important;
        }
        //Height
        &-h-#{$key} {
            height: $value+rem !important;
        }
        //Size
        &-size-#{$key} {
            min-width: $value+rem !important;
            width: $value+rem !important;
            height: $value+rem !important;
        }
    }

    // Max width / height
    @each $key, $value in $percentage-sizes {
        //Max width
        &-mw-#{$key} {
            max-width: $value !important;
        }
        //Max Height
        &-mh-#{$key} {
            max-height: $value !important;
        }
    }
}


/* ===== Media queries start ===== */
@each $bp, $mq in (
  sm: 575px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
) {
  @media (min-width: #{$mq}) {
    .al {
      @each $key, $value in $percentage-sizes {
        &-w-#{$bp}-#{$key} {
          width: $value !important;
        }
      }
    }
  }
}

//height auto
$height-reset-breakpoints: (
  sm: 574px,
  md: 767px,
  lg: 991px,
  xl: 1199px,
  xxl: 1399px
);

@each $breakpoint, $max in $height-reset-breakpoints {
  @media (max-width: #{$max}) {
    .al {
      &-h-#{$breakpoint}-auto {
        height: auto !important;
      }
    }
  }
}