@use 'sass:map';
@use 'variables' as vars;
@use 'functions' as fn;

@mixin respond($breakpoint) {
  $width: map.get(vars.$breakpoints, $breakpoint);

  @if $width ==null {
    @error 'Unknown breakpoint: #{$breakpoint}';
  }

  @media (min-width: $width) {
    @content;
  }
}

@mixin fluid-property($property,
  $min-size,
  $max-size,
  $min-vw: vars.$fluid-min-vw,
  $max-vw: vars.$fluid-max-vw) {
  #{$property}: fn.fluid($min-size, $max-size, $min-vw, $max-vw);
}

@mixin container($max-width: vars.$container-max-width,
  $gutter: vars.$container-gutter) {
  // width: min(calc(100% - #{$gutter * 2}), #{$max-width});
  width: fn.rem($max-width);
  margin-inline: auto;
}