/* Positions the overlay labels at the top-left of the hero and spaces them.
   Must be placed inside a position:relative ancestor (the hero/gallery cell)
   for the absolute positioning to anchor to the hero rather than the page. */
.unit-hero-labels {
  position: absolute;
  top: 20px;
  left: 19px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 767px) {
  .unit-hero-labels {
    flex-flow: column;
    gap: 4px;
    top: 12px;
    left: 12px;
  }
}