/*
 * Give page responsive layout contract.
 *
 * This stylesheet is loaded after main.css on the Give page so the component's
 * mobile spacing cannot be silently overridden by later global layout rules.
 */

@media (max-width: 680px) {
  .give-page .give-hero {
    padding: var(--space-5) 0;
  }

  .give-page .give-hero__grid {
    gap: var(--space-4);
  }

  .give-page h1 {
    font-size: var(--fs-h1-mobile);
  }

  .give-page h2 {
    font-size: var(--fs-h2-mobile);
  }

  .give-page .give-button {
    width: 100%;
  }

  .give-page .give-hero__lead {
    margin-bottom: var(--space-4);
    font-size: var(--fs-body);
  }

  .give-page .give-section,
  .give-page .give-final,
  .give-page .give-trust {
    padding: var(--space-5) 0;
  }

  .give-page .give-fund-grid,
  .give-page .give-trust__grid,
  .give-page .give-final__inner {
    grid-template-columns: 1fr;
  }

  .give-page .give-purpose__grid,
  .give-page .give-faq__grid,
  .give-page .give-trust__grid,
  .give-page .give-final__inner {
    gap: var(--space-4);
  }

  .give-page .give-purpose__media {
    order: 2;
  }

  .give-page .give-section-heading {
    margin-bottom: var(--space-4);
  }

  .give-page .give-fund-grid {
    gap: var(--space-3);
  }

  .give-page .give-fund-card {
    padding: var(--space-4);
  }

  .give-page .give-fund-card__number,
  .give-page .give-fund-card h3 {
    margin-bottom: var(--space-2);
  }
}