<section class="rf-grid rf-grid--two-column rf-grid--gap-regular">
  <!-- Refactored markup -->
  <article class="rf-card">
    <figure class="rf-card__figure">
      <img src="https://picsum.photos/id/237/350/200" alt="Example picture" />
    </figure>
    <div class="rf-card__content">
      <h2 class="rf-card__title"><small class="rf-card__subtitle">Image gallery</small>Adorable doggos of the week</h2>
      <p class="rf-card__text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada quis dolor nec malesuada.
      </p>
        <a class="rf-card__link" href="#">View gallery</a>
    </div>
  </article>
  
  <!-- Refactored markup -->
   <article class="rf-card">
    <figure class="rf-card__figure">
      <img src="https://picsum.photos/id/237/350/200" alt="Example picture" />
    </figure>
    <div class="rf-card__content">
      <h2 class="rf-card__title"><small class="rf-card__subtitle">Image gallery</small>Adorable doggos of the week</h2>
      <p class="rf-card__text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada quis dolor nec malesuada.
      </p>
        <a class="rf-card__link" href="#">View gallery</a>
    </div>
  </article>
</section>

/*
 * EDITOR ONLY - Basic setup just to make development easier, no need to copy this
 */

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

body {
  max-width: 768px;
  padding: 2em 0;
  margin: 0 auto;
  width: 720px;
  line-height: 1.6;
  font-family: Helvetica, Arial, sans-serif;
}

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

/*
 * REFACTORED COMPONENT STYLES
 */

.rf-grid {
  display: grid;
}

.rf-grid--two-column {
    grid-template-columns: 1fr 1fr;
}

.rf-grid--gap-regular {
    grid-gap: 1.5em;
}