.ucla-card__person.ucla-card-people--horizontal,
.ucla-card-people--horizontal-editor .ucla-card__person {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2rem;
}

/* The base People Card block's edit.js renders a bare <img> with no
   .ucla-card__image-link wrapper (unlike save.js, which does wrap it) — so
   in the editor the image itself is the direct flex child that needs this
   treatment. The ">" keeps this from also matching the frontend's
   .ucla-card__image, which is nested one level deeper inside
   .ucla-card__image-link there. */
.ucla-card__person.ucla-card-people--horizontal .ucla-card__image-link,
.ucla-card-people--horizontal-editor .ucla-card__person > .ucla-card__image {
  flex: 0 0 160px;
  width: 160px;
  margin-top: 60px;
  margin-left: 0px;
  z-index: 1;
}

/* Three class-selectors (via .ucla-card__person), not two, so this reliably
   beats the base plugin's own equally-specific editor-only rule
   (.wp-block-ucla-wordpress-plugin-card-people .ucla-card__image) regardless
   of which stylesheet happens to load last. */
.ucla-card__person.ucla-card-people--horizontal .ucla-card__image,
.ucla-card-people--horizontal-editor .ucla-card__person .ucla-card__image {
  width: 160px;
  max-width: 160px;
  height: 160px;
  object-fit: cover;
  margin-left: 0;
}

/* Same specificity concern as above — the base plugin's editor-only
   .ucla-card__body rule (for its vertical overlap effect) sets
   padding-left/margin-top/background-color at the same 2-class specificity.
   On a tie the cascade falls back to load order, which isn't guaranteed, so
   this needs the extra .ucla-card__person qualifier to win outright. */
.ucla-card__person.ucla-card-people--horizontal .ucla-card__body,
.ucla-card-people--horizontal-editor .ucla-card__person .ucla-card__body {
  margin-left: -170px;
  margin-top: 25px;
  padding-left: 170px;
  padding-top: 40px;
  flex: 1 1 auto;
  min-width: 0;
  background-color: #F2F2F2;
}

@media (max-width: 600px) {
  .ucla-card__person.ucla-card-people--horizontal,
  .ucla-card-people--horizontal-editor .ucla-card__person {
    flex-direction: column;
  }
}