.froggy-media-text {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

/* Mobile-only order, independent of the desktop Image position setting
   below (which only takes effect at the 60rem breakpoint and overrides
   this there). */
.froggy-media-text--mobile-order-last .froggy-media-text__media {
  order: 2;
}

@media (min-width: 60rem) {
  .froggy-media-text {
    grid-template-columns: 1fr 1fr;
  }

  .froggy-media-text--position-left .froggy-media-text__media { order: -1; }
  .froggy-media-text--position-right .froggy-media-text__media { order: 2; }

  .froggy-media-text--align-top { align-items: start; }
  .froggy-media-text--align-middle { align-items: center; }
  .froggy-media-text--align-bottom { align-items: end; }
  .froggy-media-text--align-stretch { align-items: stretch; }
}

.froggy-media-text__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 30px;
  aspect-ratio: var(--froggy-media-text-ratio, auto);
  object-fit: cover;
}

.froggy-media-text__media__placeholder {
  background: var(--color-grey-light, #e5e5e5);
  aspect-ratio: 4 / 3;
}

.froggy-media-text__content {
  font-family: var(--font-default);
  display: flex;
  flex-direction: column;
}

/* Only stretch the content column to the full row height when "Vertical
   align: Stretch" is chosen - otherwise it must size to its own content
   so Top/Middle/Bottom actually have room to position it within the row. */
.froggy-media-text--align-stretch .froggy-media-text__content {
  height: 100%;
}

.froggy-media-text__content__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

.froggy-media-text__content__inner > * + * {
  margin-top: var(--spacing-s, 1rem);
}

/**
 * The site's global ".blocks .inner-blocks > *" rule sets margin-left/right:
 * auto (for centering block content whose max-width is capped). That's
 * invisible in normal block flow, but since __content__inner is now a flex
 * column, auto margins on a flex item actively center it whenever its
 * capped max-width leaves leftover space - which visually looked like
 * headings/paragraphs ignoring their own left/center/right alignment.
 * Reset it here (higher specificity than the global rule) so alignment
 * set on each block is respected again.
 */
.blocks .inner-blocks.froggy-media-text__content__inner > * {
  margin-left: 0;
  margin-right: 0;
}

/**
 * Lets a stats grid placed inside this block's content grow to fill any
 * leftover vertical space - combine with "Vertical align: Stretch" above
 * so the row's height is driven by the image, and the stats grid's own
 * "Height: Full" option (see froggy-stats-grid) fills that space.
 */
.froggy-media-text__content__inner > .wp-block-acf-froggy-stats-grid {
  flex: 1;
  display: flex;
}