/* ==========================================================================
   Responsive Styles & Utility Overrides
   ========================================================================== */

@media (max-width: 639px) {
  .wrap, .wrap-narrow {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .hero {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }

  .section {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }

  .terminal {
    padding: var(--space-3) var(--space-4);
    font-size: 0.8125rem;
  }

  .contact-item {
    grid-template-columns: 80px 1fr;
    gap: var(--space-2);
  }
}