.project-dialog {
  width: min(94vw, 1120px);
  max-height: 92vh;
  overflow: auto;
  border-radius: 2px;
  background: #101111;
  color: #f6f4ee;
}

.dialog-grid {
  display: block;
  min-height: 0;
}

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

.dialog-copy {
  display: grid;
  grid-template-columns: 110px minmax(260px, 1fr) minmax(280px, 1.15fr) 48px;
  align-items: center;
  gap: 22px;
  padding: 25px 30px 27px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.dialog-copy small { color: #59b88a; }
.dialog-copy h3 { margin: 0; font-size: clamp(23px, 2.2vw, 31px); }
.dialog-copy p { margin: 0; color: #b8b8b3; line-height: 1.65; }
.dialog-copy button {
  margin: 0;
  color: #fff;
  border-color: rgba(255,255,255,.5);
}

@media (max-width: 1050px) and (min-width: 801px) {
  .dialog-copy {
    grid-template-columns: 90px minmax(220px, 1fr) minmax(220px, 1fr) 46px;
    gap: 16px;
    padding: 23px 25px 25px;
  }
}

@media (max-width: 800px) {
  .project-dialog { width: 94vw; max-height: 90vh; }
  .dialog-photo > img { width: 100%; height: auto; max-height: 64vh; }
  .dialog-copy { grid-template-columns: 1fr 46px; gap: 12px 18px; padding: 21px; }
  .dialog-copy small { grid-column: 1; }
  .dialog-copy h3 { grid-column: 1; }
  .dialog-copy p { grid-column: 1 / -1; }
  .dialog-copy button { grid-column: 2; grid-row: 1 / 3; }
}