/* Controles à esquerda; prévia à direita, no cadastro e na edição da obra. */
#workForm .field:has(> #workImagePreview) {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  gap: 10px 14px;
  align-items: start;
}
#workForm .field:has(> #workImagePreview) > label {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
}
#workForm #workImagePreview {
  grid-column: 2;
  grid-row: 2 / 5;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 1 !important;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
  font-size: 12px;
}
#workForm #workImageControls {
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  margin: 0;
}
#workForm #workImageControls label {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
}
#workForm #workImageControls input[type="range"] {
  min-width: 0;
  width: 100%;
  padding: 0;
  margin: 0;
}
#workForm #workImageEditButton {
  grid-column: 1;
  grid-row: 3;
  margin: 0 !important;
  max-width: 100%;
}
#workForm .field:has(> #workImagePreview) > input[type="file"] {
  grid-column: 1;
  grid-row: 4;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
}
@media (max-width: 520px) {
  #workForm .field:has(> #workImagePreview) {
    grid-template-columns: minmax(0, 1fr);
  }
  #workForm #workImagePreview {
    grid-column: 1;
    grid-row: 2;
    max-width: 240px;
    justify-self: center;
  }
  #workForm #workImageControls { grid-row: 3; }
  #workForm #workImageEditButton { grid-row: 4; }
  #workForm .field:has(> #workImagePreview) > input[type="file"] { grid-row: 5; }
}