/* ============================================================
   SECTION: What Is Port 1560?
   Edit: mockup/css/sections/intro.css
   ============================================================ */

.intro {
  --section-bg: var(--color-white);
  --section-accent: var(--color-sage);
}

.intro__grid {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 48rem) {
  .intro__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.intro__text {
  font-size: var(--text-lg);
  color: var(--color-ink-muted);
  line-height: 1.7;
}

.intro__pillars {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 36rem) {
  .intro__pillars {
    grid-template-columns: 1fr 1fr;
  }
}

.pillar {
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-copper);
}

.pillar__label {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-xs);
  color: var(--color-ink);
}

.pillar__desc {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: 1.5;
}