/* ---------------------------------------------------------------------------
   Reset
   Just the essentials: predictable box sizing, no default margins, and
   media elements that behave like blocks and never overflow their container.
--------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Page edge padding
   One knob (--edge) controls the gutter on the left and right of the page.
   Fluid: 1rem on small screens, growing to a max of 2rem on wide ones.
--------------------------------------------------------------------------- */

:root {
  --edge: clamp(1rem, 5vw, 2rem);
}

body {
  padding-inline: var(--edge);
}