/* ------ IMAGE PLACEHOLDER STYLES ------ */

/* -- Preview frame -- */
.image-preview-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background-faded);
  padding: var(--space-l);
}

.image-preview-frame img {
  max-height: 50vh;
  max-width: 100%;
  height: auto;
}

/* -- URL output --
   The copy button sits below the field, not beside it. Beside, it competed with
   the field for a row the URL always wants all of, and it had to shrink to
   data-size="small" to fit. Below, it is the ordinary button the rest of the
   page copies with, and the field gets the full column.

   The stacking itself is `.block .gap-s .align-start` on the element — the
   layout primitives already say column, gap, and size-to-content, and the row
   twelve lines up in this same tool composes them the same way. All this file
   owns is the one thing they cannot express: the input filling the column. */
.image-url-row input {
  width: 100%;
}

/* ------ RESPONSIVE ------ */

/* -- Mobile -- */
@media (max-width: 768px) {
  .image-preview-frame {
    padding: var(--space-m);
  }
}