.page-projects {
  position: relative;
  background: #06264b;
  color: #ffffff;
}

.page-projects::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(2, 18, 45, 0.2) 0%, rgba(2, 18, 45, 0.42) 100%),
    url("/images/projects-background.webp") center top / contain no-repeat;
  background-color: #06264b;
}

.page-projects::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(1, 16, 39, 0.08) 0%, rgba(1, 16, 39, 0.22) 100%);
}

.page-projects .site-footer {
  position: relative;
  z-index: 1;
}

.projects-banner {
  background: #004d89;
}

.projects-banner__copy {
  max-width: 72rem;
}

.projects-sections {
  position: relative;
  z-index: 1;
  padding: 3rem 0 4rem;
  background: #ffffff;
}

.projects-section + .projects-section {
  margin-top: 4rem;
}

.projects-section__header {
  margin-bottom: 1.75rem;
}

.projects-section__header h2 {
  margin: 0;
  color: #004d89;
  font-size: var(--faq-title-size);
  line-height: 1.02;
  font-weight: 400;
}

.projects-section__header p {
  margin: 1rem 0 0;
  max-width: 72rem;
  color: #004d89;
  font-size: var(--faq-answer-size);
  line-height: 1.28;
}

.project-cards {
  display: grid;
  gap: 1.25rem;
}

.project-card {
  padding: 1.5rem;
  border-radius: 0.85rem;
  background: #009fd7;
}

.project-card h3 {
  margin: 0 0 0.85rem;
  color: #004d89;
  font-size: var(--faq-question-size);
  line-height: 1.08;
  font-weight: 400;
}

.project-card__body,
.project-card__body p,
.project-card__body li {
  color: #ffffff;
  font-size: var(--faq-answer-size);
  line-height: 1.28;
}

.project-card__body > *:first-child {
  margin-top: 0;
}

.project-card__body > *:last-child {
  margin-bottom: 0;
}

.affiliate-list {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
}

.affiliate-list li + li {
  margin-top: 0.45rem;
}

@media (max-width: 900px) {
  .projects-hero__inner {
    padding-top: 10rem;
  }
}

@media (max-width: 700px) {
  .projects-hero,
  .projects-hero__inner {
    min-height: 27rem;
  }

  .projects-hero__inner {
    padding-top: 8.5rem;
    padding-bottom: 1.5rem;
  }

  .projects-banner__inner,
  .projects-sections {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }
}

@media (max-width: 520px) {
  .projects-banner__inner {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .project-card {
    padding: 1rem;
  }
}