/* ============================================================
   OII4 LAYOUT FOUNDATION
============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  background: var(--surface);
  color: var(--text-primary);
}

img,
video,
iframe {
  max-width: 100%;
}

.oii-container {
  width: min(var(--container), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
}

.oii-container-wide {
  width: min(var(--container-wide), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
}

.oii-section {
  padding-block: clamp(4.5rem, 8vw, 7rem);
}

.oii-section-tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.oii-section-dark {
  background: var(--surface-dark);
  color: var(--text-inverse);
}

.oii-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
}

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

@media (max-width: 980px) {
  .oii-grid-2,
  .oii-grid-3 {
    grid-template-columns: 1fr;
  }
}