/* ═══════════════════════════════════════════
   RESPONSIVE SYSTEM — Mobile First
   ═══════════════════════════════════════════ */

/* ── Base (Mobile) Defaults ── */
.grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: var(--spacing-8);
}

/* ── Small Devices (Tablets, 768px+) ── */
@media (min-width: 768px) {
  .section {
    padding-block: var(--spacing-24);
  }

  .section-title h2 {
    font-size: var(--text-5xl);
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-12);
  }
}

/* ── Large Devices (Desktops, 992px+) ── */
@media (min-width: 992px) {
  .section {
    padding-block: var(--spacing-32);
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-8);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-8);
  }
}

/* ── Extra Large (1400px+) ── */
@media (min-width: 1400px) {
  .container {
    max-width: 1280px;
  }
}

/* ── Mobile Tweaks ── */
@media (max-width: 767px) {
  .section-title h2 {
    font-size: var(--text-3xl);
  }

  .hero-subtitle::before,
  .hero-subtitle::after {
    width: 16px;
    margin: 0 8px;
  }

  .section-title::after {
    width: 40px;
  }

  .btn {
    padding: 12px 28px;
    font-size: 0.75rem;
  }
}