@use 'functions' as fn;

$max-widths: (
  'sm': 240px,
  'md': 360px,
  'lg': 480px,
  'xl': 600px,
  '2xl': 720px,
  '3xl': 840px,
  '4xl': 960px,
  '5xl': 1080px,
  '6xl': 1200px,
);

$divisors: (
  '1\\.25': 1.25,
  '1\\.3': 1.3,
  '1\\.35': 1.35,
  '1\\.4': 1.4,
);

.max-w {
  &-full {
    max-width: 100%;
  }

  &-auto {
    max-width: auto;
  }

  @each $suffix, $size in $max-widths {
    &-#{$suffix} {
      max-width: fn.rem($size);
    }
  }
}

@each $suffix, $size in $max-widths {
  @each $divisor-selector, $divisor-value in $divisors {
    .max-w-#{$suffix}\/#{$divisor-selector} {
      max-width: calc(fn.rem($size) / #{$divisor-value});
    }
  }
}