<article class="cta">
  <img src='https://images.unsplash.com/photo-1600078686889-8c42747c25fe?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NDMzMjg5Nw&ixlib=rb-1.2.1&q=80&w=400' alt='Bluetit'>
  <div class="cta__text-column">
    <h2>Aspect ratio is great</h2>
    <p>This image has an aspect ratio of 3/2.</p>
    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio">Read all about it</a>
  </div>
</article>

<article class="cta">
  <img src='https://images.unsplash.com/photo-1569762825621-2dab96140a1d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NDMzNDkxMQ&ixlib=rb-1.2.1&q=80&w=400' alt='Small blue-grey yellow-breasted bird'>
  <div class="cta__text-column">
    <h2>Aspect ratio is great</h2>
    <p>This image has an aspect ratio of 3/2. But when the text is longer, the image grows too, overriding its aspect ratio. Cool!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio">Read all about it</a>
  </div>
</article>

* {
  box-sizing: border-box;
}

body {
  --pad: clamp(0.5rem, 2vw, 2rem);
  --pad-sm: calc(var(--pad) / 2);
  --pad-xs: calc(var(--pad) / 4);
  --outline: max(var(--pad-xs), 0.25rem) solid;
  
  font-family: 'Exo 2', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  background: lightblue;
}

img {
  display: block;
}

h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
}

@media (min-width: 50em) {
  h2 {
    font-size: 1.8rem;
  }
}

.cta {
  display: flex;
  flex-wrap: wrap;
  background: white;
  max-width: 50rem;
  width: 100%;
  border-radius: var(--pad);
  overflow: hidden;
  border: var(--outline);
}

.cta img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  flex: 1 1 300px;
  width: 300px;
  outline: var(--outline);
}

.cta__text-column {
  padding: var(--pad) var(--pad) var(--pad);
  flex: 1 0 50%;
}

.cta__text-column > * + * {
  margin: min(1.5rem, 2.5vw) 0 0 0;
}

.cta a {
  display: inline-block;
  color: black;
  padding: var(--pad-xs) var(--pad);
  text-decoration: none;
  background: deeppink;
  border-radius: var(--pad-sm);
  font-weight: 700;
  border: 0.35rem solid;
}