.projects-page {
  padding-bottom: var(--spacing-8);
}

.projects-intro {
  width: min(100% - (2 * var(--spacing-md)), 1200px);
  padding-block: var(--spacing-8) var(--spacing-7);
}

.projects-intro h1 {
  max-width: 13ch;
  margin-bottom: var(--spacing-4);
  font-size: clamp(2.5rem, 7vw, 5rem);
  letter-spacing: -0.045em;
}

.projects-intro p {
  max-width: 44rem;
  font-size: var(--font-size-lg);
}

.projects-list {
  width: min(100% - (2 * var(--spacing-md)), 1200px);
  padding-top: 0;
}

.projects-list h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.projects-list .project-card__actions {
  padding-top: var(--spacing-4);
}

.projects-footer {
  width: min(100% - (2 * var(--spacing-md)), 1200px);
  margin: 0 auto;
  padding: var(--spacing-7) 0;
  text-align: center;
  border-top: 1px solid var(--border-color);
}

.projects-footer a {
  color: var(--accent-color);
  font-weight: 700;
}

@media (max-width: 640px) {
  .projects-intro,
  .projects-list,
  .projects-footer {
    width: min(100% - (2 * var(--spacing-sm)), 1200px);
  }
}