/** At this monitor size it is wider than Figma */
figure {
  --figure-padding-block: 3.75rem;
  grid-template-columns: [image caption] 1fr;
  padding-block: 3.75rem;
  padding-block: var(--figure-padding-block);
  container: figure / inline-size;
}
@media (min-width: 64.001rem) {
figure {
    grid-template-columns: [image] var(--content-width) [caption] min(220px, 15vw);
}
  }
figure {
  gap: 1rem;
}
figure  > * {
    grid-column: image;
    width: 100%;
  }
figure img {
    width: 100%;
  }
figure figcaption {
    grid-column: caption;
    font-style: italic;
    font-family: var(--font-sans);
    font-size: var(--paragraph-size-small);
  }
@media(min-width: 50.001rem) {
    .figure--wrapper[data-variant="learning"] figure {
      direction: rtl;
      grid-template-columns: [image] 6fr [caption] 2fr;
    }
      .figure--wrapper[data-variant="learning"] figure img {
        border: 1px solid var(--grey);
      }
    .figure--wrapper[data-variant="learning"] figcaption {
      align-self: start;
      font-size: var(--paragraph-size-large);
    }
  }