<ul class="list">
  <li class="list__item">
    <figure class="list__figure">
      <img src="https://www.wallpapertip.com/wmimgs/166-1660187_torres-del-paine-national-park.jpg" alt="">
    </figure>
    <a href="" class="list__link">Ocean</a>
    <h2 class="list__title">Ocean</h2>
    <p class="list__text">10 popular places</p>
  </li>
  <li class="list__item">
    <figure class="list__figure">
      <img src="https://www.wallpapertip.com/wmimgs/166-1660187_torres-del-paine-national-park.jpg" alt="">
    </figure>
    <a href="" class="list__link">Ocean</a>
    <h2 class="list__title">Ocean</h2>
    <p class="list__text">10 popular places</p>
  </li>
  <li class="list__item">
    <figure class="list__figure">
      <img src="https://www.wallpapertip.com/wmimgs/166-1660187_torres-del-paine-national-park.jpg" alt="">
    </figure>
    <a href="" class="list__link">Ocean</a>
    <h2 class="list__title">Ocean</h2>
    <p class="list__text">10 popular places</p>
  </li>
</ul>

* {
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
}

figure {
  margin: 0;
}

.list {
  --padding: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  padding-left: 0;
  margin: 0 auto;
  list-style-type: none;
}

.list__item {
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  color: white;
  border-radius: 20px;
  overflow: hidden;
}

.list__figure {
  grid-column: 1/2;
  grid-row: 1/4;
}

.list__link {
  grid-column: 1/2;
  grid-row: 1/2;
  margin: var(--padding);
  color: inherit;
}

.list__title {
  align-self: end;
  grid-column: 1/2;
  grid-row: 2/3;
  margin: 0 var(--padding);
}

.list__text {
  grid-column: 1/2;
  grid-row: 3/4;
  margin: 0 var(--padding) var(--padding) ;
}