@use 'sass:map';
@use 'spacers' as spacers;

$grid-gutter-width: map.get(spacers.$spacers, 5);
$grid-columns: 12;
$grid-breakpoints: (
  xxs: 0,
  xs: 360px,
  sm: 564px,
  md: 768px,
  lg: 1088px,
  xl: 1450px,
);
$grid-max-breakpoints: (
  xs: map.get($grid-breakpoints, sm) - 0.02,
  sm: map.get($grid-breakpoints, md) - 0.02,
  md: map.get($grid-breakpoints, lg) - 0.02,
);
$container-max-widths: (
  sm: 528px,
  md: 612px,
  lg: 1056px,
);

@mixin tiny-screens-media-query {
  @media (width <= 319px), (height <= 308px) {
    @content;
  }
}