/* layout.css */
:root {
  --ds-layout-breakpoints-desktop: 1024px;
  --ds-layout-breakpoints-mobile: 0px;
  --ds-layout-breakpoints-tablet: 768px;
  --ds-layout-breakpoints-wide: 1440px;
  --ds-layout-container-max-width-desktop: 1200px;
  --ds-layout-container-max-width-mobile: 100%;
  --ds-layout-container-max-width-tablet: 768px;
  --ds-layout-container-padding-desktop: 32px;
  --ds-layout-container-padding-mobile: 16px;
  --ds-layout-container-padding-tablet: 24px;
  --ds-layout-grid-columns-desktop: 12;
  --ds-layout-grid-columns-mobile: 4;
  --ds-layout-grid-columns-tablet: 8;
  --ds-layout-grid-gutter-desktop: 24px;
  --ds-layout-grid-gutter-mobile: 16px;
  --ds-layout-grid-gutter-tablet: 24px;
  --ds-layout-grid-margin-desktop: 32px;
  --ds-layout-grid-margin-mobile: 16px;
  --ds-layout-grid-margin-tablet: 24px;
}