.frame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.frame {
  margin: 0;
  min-width: 0;
}

.frame-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.frame img,
.image-dialog img {
  display: block;
  width: 100%;
}

.frame img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #edf0eb;
}

.frame figcaption {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.image-dialog {
  width: min(1100px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.image-dialog::backdrop {
  background: rgb(32 36 33 / 70%);
}

.image-dialog img {
  max-height: calc(100vh - 120px);
  object-fit: contain;
  background: #edf0eb;
}

.image-dialog p {
  margin: 10px 0 0;
  color: var(--muted);
}

.dialog-close {
  min-height: 34px;
  margin-bottom: 10px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #eef3ed;
  cursor: pointer;
}