/* v1.2.10 — Preview media containment. This sheet must load AFTER v1.2.9.
 * Uploaded media is a replaced element: the legacy 16px padding and grid-centering
 * let its intrinsic minimum size escape a 4:3 frame, covering the status pills.
 */
.hp-main[data-view="create"] .creation-phone__record-card--hero .creation-phone__media:not(.is-empty) {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #edf3f1;
}
.hp-main[data-view="create"] .creation-phone__record-card--hero .creation-phone__media:not(.is-empty) > :is(img, video) {
  position: absolute;
  inset: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
}
/* The tags have their own row below the media, never layered over it. */
.hp-main[data-view="create"] .creation-phone__record-card--hero .creation-phone__record-pills {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  background: #fff;
}
/* The cover tab is deliberately a thumbnail: crop within its 75x76 slot,
 * never permit the source image to expand that grid cell. */
.hp-main[data-view="create"] .creation-phone__studio-list .creation-phone__media:not(.is-empty) {
  position: relative;
  display: block;
  box-sizing: border-box;
  height: 76px;
  min-height: 76px;
  max-height: 76px;
  padding: 0;
  overflow: hidden;
  background: #edf3f1;
}
.hp-main[data-view="create"] .creation-phone__studio-list .creation-phone__media:not(.is-empty) > :is(img, video) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}
/* The Photo / Video post preview uses a top-level media frame, unlike the
 * Glaze record card. Constrain its replaced elements by the same rule. */
.hp-main[data-view="create"] .creation-phone__screen > .creation-phone__media:not(.is-empty) {
  position: relative;
  display: block;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #edf3f1;
}
.hp-main[data-view="create"] .creation-phone__screen > .creation-phone__media:not(.is-empty) > :is(img, video) {
  position: absolute;
  inset: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
}