/* Fixed four-frame composition: wide / tall + wide / tall. */
@media (min-width: 751px) {
  .project-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    grid-template-rows: auto 500px 420px auto;
    grid-template-areas:
      "bride bride"
      "selfproof commercial"
      "selfproof shortfilm"
      "student student";
    gap: 20px;
    align-items: stretch;
  }

  .project-grid > .project,
  .project-grid > .project.featured {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .project-bride { grid-area: bride; order: initial; }
  .project-selfproof { grid-area: selfproof; order: initial; }
  .project-commercial { grid-area: commercial; order: initial; }
  .project-shortfilm { grid-area: shortfilm; order: initial; }
  .student-collection { grid-area: student; order: initial; }

  .project-grid > .project .project-media,
  .project-grid > .project.featured .project-media {
    flex: none;
    min-height: 0;
  }

  .project-bride .project-media {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .project-selfproof .project-media {
    height: 700px !important;
    background: #07132a;
  }

  .project-commercial .project-media {
    aspect-ratio: 16 / 9;
    height: auto !important;
  }

  .project-shortfilm .project-media { height: 240px !important; }

  .project-bride .project-media,
  .project-selfproof .project-media,
  .project-commercial .project-media { background: #07132a; }

  .project-bride .project-media > img,
  .project-selfproof .project-media > img,
  .project-commercial .project-media > img {
    display: block;
    height: 100%;
    object-fit: contain !important;
    width: 100%;
  }

  .project-grid > .project .project-body,
  .project-grid > .project.featured .project-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: 23px 28px 25px;
  }

  .project-grid > .project .project-body h3 { font-size: 30px; }
  .project-commercial .project-body,
  .project-shortfilm .project-body { padding: 18px 22px 20px !important; }

  .project-commercial .project-body { min-height: 239px; }

  .project-commercial .multi-link {
    flex: 0 0 auto;
    margin-top: 14px;
  }
  .project-commercial .project-body h3,
  .project-shortfilm .project-body h3 { font-size: 24px; }
  .project-commercial .project-body > p:not(.number),
  .project-shortfilm .project-body > p:not(.number) { font-size: 13px; }
}

@media (max-width: 750px) {
  .project-selfproof .project-media { background: #07132a; }
  .project-selfproof .project-media img { object-fit: contain; }
}