/*
MODULE: Projects Section Styles
RESPONSIBILITY: Section shell and heading for the .projects block. Card
  styling lives in project-card.css.
DEPENDS ON: tokens.css, layout.css
EXPOSES: .projects and its direct elements
*/

.projects__header {
  max-width: 40rem;
  margin-bottom: var(--space-9);
}

.projects__heading {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-4);
}

.projects__intro {
  font-size: var(--font-size-md);
  color: var(--color-muted);
}

.projects__list {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-9);
}

@media (min-width: 768px) {
  .projects__heading {
    font-size: var(--font-size-3xl);
  }
}