:root {
  --pad: 16px;
  --content-max: 100%;
  --wide-max: 100%;
}

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

.container-content,
.container-wide {
  width: 100%;
  margin: 0 auto;
  padding-inline: var(--pad);
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
  min-width: 0;
}

.container-content {
  max-width: var(--content-max);
}

.container-wide {
  max-width: var(--wide-max);
}

.full-bleed {
  width: 100%;
}

.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.prose {
  max-width: 65ch;
}

/* Optional helper classes used by inner pages */
.page-main {
  padding: 4rem 0;
  padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right));
}

.page-main-compact {
  padding: 3rem 0;
  padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right));
}

.page-main-404 {
  padding: 5rem 0;
  padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right));
}

/* Mobile-first defaults */
.grid-2,
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Breakpoints */
@media (min-width: 640px) {
  :root {
    --pad: 20px;
  }
}

@media (min-width: 768px) {
  :root {
    --pad: 24px;
  }

  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  :root {
    --pad: 28px;
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  :root {
    --pad: 32px;
    --content-max: 1280px;
    --wide-max: 1280px;
  }
}

@media (min-width: 1536px) {
  :root {
    --wide-max: 1536px;
  }
}

@media (min-width: 1600px) {
  :root {
    --wide-max: 1600px;
  }
}

@media (min-width: 1920px) {
  :root {
    --wide-max: 1840px;
  }
}

@media (min-width: 2560px) {
  :root {
    --wide-max: 1920px;
  }
}

/* If you want larger mobile gutters, override here */
@media (max-width: 760px) {
  :root {
    --pad: 24px;
  }
}