.promo-card__media {
  width: 100%;
}

.promo-card__media__aspect-container {
  --ratio: calc(var(--w, 1) / var(--h, 1));
  padding-bottom: calc(100% / var(--ratio));
  height: 0;
  position: relative;
}

.promo-card__media-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.promo-card__media-container img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  corner-shape: inherit;
  object-position: center center;
  object-fit: cover;
}

/* mobile = text col has L/R pad, media col edge-to-edge.
   desktop (columns no longer stacked, 782px = core wp:columns breakpoint) =
   container carries L/R pad on all 4 edges, text col's own L/R pad backs off
   so it isn't doubled. */
@media (min-width:782px) {
  .promo-card__container {
    padding-left: var(--wp--preset--spacing--40);
    padding-right: var(--wp--preset--spacing--40);
  }

  .promo-card__text {
    padding-left: 0;
    padding-right: 0;
  }
}