/* ===== Container ===== */
.container {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

/* ===== Sections ===== */
.section {
  padding-block: var(--space-3xl);
}

/* ===== Bento Features Grid ===== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.card.wide {
  grid-column: span 2;
}

/* ===== Responsive ===== */


/* Mobile — single column grid */
@media (max-width: 600px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .card.wide {
    grid-column: span 1;
  }

  .section {
    padding-block: var(--space-2xl);
  }

  .hero {
    padding-block-start: var(--space-2xl);
    padding-block-end: var(--space-lg);
  }
}