<article>
  <figure>
    <img src="https://assets.codepen.io/32795/humayun-thom-arno.jpg" alt="">
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore a voluptate maiores in officia, iste temporibus cumque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor vel ea eum magnam modi adipisci, iure sed! Culpa numquam quisquam quis dicta voluptas enim, sequi laborum atque itaque, aut aperiam!</figcaption>
  </figure>
</article>

@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap");

article {
  counter-reset: figures;
}

figure {
  counter-increment: figures;
  inline-size: fit-content;
  margin: 0 auto;
  width: 600px;
  background: oklch(70% 0.1 240 / 0.1);
  padding-block: 2rem 1rem;

  img {
    display: block;
    max-width: 90%;
    margin-inline: auto;
  }

  figcaption:before {
    content: "Figure " counter(figures) ": ";
    font-family: "Roboto Slab", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
  }

  figcaption {
    margin-block: 1rem;
    margin-inline: 2rem;
    font-family: Raleway, sans-serif;
  }
}