/* Responsive spacings for landmarks, section and article (opt-in, not imported by default) */

body > header,
body > main,
body > footer,
section {
  @media (width >= 576px) {
    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.25);
  }
  @media (width >= 768px) {
    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.5);
  }
  @media (width >= 1024px) {
    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.75);
  }
  @media (width >= 1280px) {
    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 2);
  }
  @media (width >= 1536px) {
    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 2.25);
  }
}

article {
  @media (width >= 576px) {
    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.25);
    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.25);
  }
  @media (width >= 768px) {
    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.5);
    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.5);
  }
  @media (width >= 1024px) {
    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.75);
    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.75);
  }
  @media (width >= 1280px) {
    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 2);
    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 2);
  }
  @media (width >= 1536px) {
    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 2.25);
    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 2.25);
  }
}