.section {
  position: relative;
  padding: var(--oco-section-y) var(--oco-section-x);
}

.container {
  width: min(100%, var(--oco-container));
  margin-inline: auto;
}

.section-header {
  max-width: 1120px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.section-header h2 + p,
.section-header p + p {
  margin-top: 18px;
}

h2 {
  margin-bottom: 18px;
}

.grid {
  display: grid;
  gap: clamp(20px, 2.2vw, 32px);
}

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

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

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

@media (max-width: 767px) {
  .section {
    padding: 56px 22px;
  }

  .grid-2,
  .grid-3,
  .grid-6 {
    grid-template-columns: 1fr;
  }
}