// ===
// Grid
// ===
$grid-breakpoint-map: (
  xs: 0,
  ssm: 322px,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1920px,
);

// $reverse-grid-breakpoint-map: reverse($grid-breakpoint-map);

@mixin max-2sm {
  @media screen and (max-width: map-get($grid-breakpoint-map, 'ssm') - 1px) {
    @content;
  }
}

@mixin max-sm {
  @media screen and (max-width: map-get($grid-breakpoint-map, 'sm') - 1px) {
    @content;
  }
}

@mixin max-md {
  @media screen and (max-width: map-get($grid-breakpoint-map, 'md') - 1px) {
    @content;
  }
}

@mixin max-lg {
  @media screen and (max-width: map-get($grid-breakpoint-map, 'lg') - 1px) {
    @content;
  }
}

@mixin max-xl {
  @media screen and (max-width: map-get($grid-breakpoint-map, 'xl') - 1px) {
    @content;
  }
}

@mixin max-2xl {
  @media screen and (max-width: map-get($grid-breakpoint-map, 'xxl') - 1px) {
    @content;
  }
}

@mixin min-2sm {
  @media screen and (min-width: map-get($grid-breakpoint-map, 'ssm')) {
    @content;
  }
}

@mixin min-sm {
  @media screen and (min-width: map-get($grid-breakpoint-map, 'sm')) {
    @content;
  }
}

@mixin min-md {
  @media screen and (min-width: map-get($grid-breakpoint-map, 'md')) {
    @content;
  }
}

@mixin min-lg {
  @media screen and (min-width: map-get($grid-breakpoint-map, 'lg')) {
    @content;
  }
}

@mixin min-xl {
  @media screen and (min-width: map-get($grid-breakpoint-map, 'xl')) {
    @content;
  }
}

@mixin min-2xl {
  @media screen and (min-width: map-get($grid-breakpoint-map, 'xxl')) {
    @content;
  }
}

// ===
// Container
// ===
$container-gap: 20px;
$container: 1300px + ($container-gap * 2);
$container-map: (
  "smaller": 960px + ($container-gap * 2),
  "small": 1210px + ($container-gap * 2),
  "medium": 1510px + ($container-gap * 2),
  "big": 1920px + ($container-gap * 2),
  "form": 460px + ($container-gap * 2),
);

// ===
// Section
// ===
$section-padding: 135px;
$section-xl-padding: 100px;
$section-lg-padding: 55px;
// $section-sm-padding: 45px;