.projects-page { background: #f4f6f8; }
.projects-page .site-header nav a[aria-current="page"] { color: var(--blue); }
.projects-hero { padding: 96px max(24px, calc((100vw - var(--max))/2)) 82px; background: var(--navy-2); color: #fff; }
.projects-hero p { margin-bottom: 12px; color: #9ecfff; font-size: 15px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.projects-hero h1 { margin: 0; font-size: clamp(72px, 11vw, 150px); line-height: .82; letter-spacing: -.065em; }
.project-list { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; padding: 76px 0 110px; }
.project-block { margin-bottom: 74px; }
.project-block header { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.project-block h2 { margin: 0; color: var(--navy); font-size: clamp(30px, 4vw, 50px); line-height: 1; letter-spacing: -.04em; }
.project-block header p { margin: 0; color: var(--blue); font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.project-media { display: grid; gap: 12px; }
.project-media.three, .project-media.featured-video { grid-template-columns: repeat(3, 1fr); }
.project-media.four { grid-template-columns: repeat(2, 1fr); }
.project-media.two { grid-template-columns: repeat(2, 1fr); }
.project-media.one { grid-template-columns: minmax(0, 760px); }
.project-media img, .project-media video { width: 100%; height: 390px; border: 0; background: var(--navy-2); object-fit: cover; }
.project-media.three img { height: 390px; }
.project-media.four img { height: 360px; }
.project-media.featured-video img, .project-media.featured-video video { height: 390px; }
.project-block.compact { max-width: 930px; }
.projects-page footer { margin-top: 0; }
@media (max-width: 800px) {
  .projects-hero { padding-top: 72px; }
  .project-list { width: min(var(--max), calc(100% - 34px)); padding-top: 54px; }
  .project-block { margin-bottom: 58px; }
  .project-block header { display: block; }
  .project-block header p { margin-top: 10px; white-space: normal; }
  .project-media.three, .project-media.four, .project-media.two, .project-media.featured-video { grid-template-columns: 1fr; }
  .project-media img, .project-media video, .project-media.three img, .project-media.four img, .project-media.featured-video img, .project-media.featured-video video { height: min(72vw, 470px); }
}