/* Wide layout layer. The original UI and all JavaScript behaviour stay intact. */
html, body, #root { width: 100%; min-width: 320px; }

@media (min-width: 1280px) {
  .max-w-7xl {
    max-width: min(1680px, calc(100vw - 48px)) !important;
  }

  .max-w-6xl {
    max-width: min(1520px, calc(100vw - 64px)) !important;
  }

  header .max-w-7xl,
  footer .max-w-7xl {
    max-width: min(1760px, calc(100vw - 48px)) !important;
  }

  main section > .max-w-7xl,
  main section > .max-w-6xl {
    width: 100%;
  }
}

@media (min-width: 1536px) {
  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Keep readable paragraphs compact while the surrounding sections use the screen. */
p.max-w-2xl, p.max-w-3xl { max-width: 52rem !important; }

/* Prevent the wide layout from introducing horizontal page dragging. */
.min-w-0 { min-width: 0; }
img, video, iframe { max-width: 100%; }