// stylelint-disable rem-over-px/rem-over-px
// Layout widths
$width-max-layout: 100%;
$width-max-article: 800px;
$width-grid-base: 1440px;
$width-max-mobile: 1030px;

// Breakpoints for containers
$container-ipad: 770px;
$container-ipad-landscape: 1024px;
$container-mobile: 600px;
$container-desktop: 1200px;
$container-small-mobile: 420px;
$container-tiny-mobile: 354px;

// Gutenberg widths
$width-wide: 1200px;
$width-full: 100%;

// CSS variables for JS. Remove this negative 1px value or add 1px if needed depending on when you want to stop the JS from controling the position of the navigation.
:root {
  --width-max-mobile: #{$width-max-mobile - 1px};
}