.project-media .grid-ink,
.dialog-photo .grid-ink {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  pointer-events: none;
}

.project-media .grid-ink::before,
.dialog-photo .grid-ink::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 20px;
  background: #050606;
  transform: translateX(-50%);
}

.project-media .grid-ink::after,
.dialog-photo .grid-ink::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 20px;
  background: #050606;
  transform: translateY(-50%);
}

.dialog-photo .grid-ink { display: none; }
.dialog-photo.has-grid .grid-ink { display: block; }
.project-media .grid-ink--two::after,
.dialog-photo .grid-ink--two::after { display: none; }

/* The campaign artwork is a native 2-panel composition. Its source divider
   sits off-centre, so align the cover line with the artwork instead of 50%. */
.project-media .grid-ink--two::before { left: 64.55%; }
.dialog-photo .grid-ink--two::before { left: 62.56%; }

.dialog-photo {
  position: relative;
  background: #090a0a;
}

.dialog-photo > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 800px) {
  .project-media .grid-ink::before,
  .dialog-photo .grid-ink::before { width: 12px; }
  .project-media .grid-ink::after,
  .dialog-photo .grid-ink::after { height: 12px; }
  .dialog-photo > img { max-height: 64vh; }
}