/* styles/sections/problem-cards.css
 * /strategy/ "Sound Familiar?": the copy and its action beside a 2 x 2 grid of problem cards
 * (icon over h3) from 900px, the grid at the start; stacked, copy first and centred, below.
 * The 767px query is the page's own pre-swap card spacing. */
@layer sections {
  .sound-familiar {
    padding-block: var(--space-64);
  }

  .sound-familiar-content {
    display: grid;
    grid-template-areas: "text" "grid";
    gap: var(--space-48);
    align-items: center;
  }

  .sound-familiar-text {
    grid-area: text;
    text-align: center;
  }

  .sound-familiar-text p {
    margin-block: var(--space-24);
    color: var(--ink-muted);
  }

  .section-cta {
    margin-top: var(--space-32);
  }

  .problems-grid {
    display: grid;
    grid-area: grid;
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .problem-card {
    padding: var(--space-24);
    text-align: left;
  }

  .problem-icon {
    margin-bottom: var(--space-24);
  }

  .problem-icon img {
    width: 64px;
    height: 64px;
  }

  @media (width >= 900px) {
    .sound-familiar-content {
      grid-template-areas: "grid text";
      grid-template-columns: 1fr 1fr;
      gap: var(--space-96);
    }

    .sound-familiar-text {
      text-align: left;
    }

    .problems-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (width <= 767px) {
    .problems-grid {
      gap: var(--space-24);
    }

    .problem-card {
      margin-bottom: var(--space-8);
      padding: var(--space-16);
    }

    .problem-icon {
      margin-bottom: var(--space-16);
    }
  }
}