.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-fluid {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 15px;
}

.band {
  padding: var(--section-y) 0;
}

.band-white {
  background: var(--bg-white);
}

.band-gray {
  background: var(--bg-band);
}

.band-ink {
  background: var(--bg-ink);
  color: var(--text-on-dark);
}

.grid {
  display: grid;
  gap: 24px;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.page {
  padding-top: var(--header-offset);
}

.section-title {
  text-align: center;
  margin-bottom: 28px;
}

.placeholder-note {
  font-size: 12px;
  color: #888;
  margin-top: 8px;
}

@media (max-width: 991px) {
  .grid-3,
  .grid-4,
  .grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  h1 {
    font-size: 28px;
  }
}