<h1>Featured galleries</h1>
<!-- Refactored markup -->
<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>

/*
 *  Example setup styles - don't need to be refactored
 */

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

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

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


/*
 *  Global styles - difficult to refactor (high scope)
 */

h1, h2 {
    margin-top: 0;
    margin-bottom: 0.75em;
    line-height: 1.3;
    font-size: 2.5em;
    font-family: Georgia, "Times New Roman", Times, serif;
}

.button {
  border: 0;
  display: block;
  max-width: 200px !important;
  text-align: center;
  margin: 1em auto;
  padding: 1em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
}

.cta {
  max-width: none !important;
  margin-bottom: 0;
  color: #fff;
  background-color: darkred;
  margin-top: 1em;
}

/* Refactored card component styles */

:root {
  --color-background: #f5f5f5;
  --color-text-negative: #ffffff;
  --color-cta: #880000;
}

.rf-card {
  background: var(--color-background);
}

.rf-card__figure {
  margin: 0;
}

.rf-card__title {
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0.5em;
}

.rf-card__subtitle {
  font-size: 0.5em;
  opacity: 0.8;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  padding-left: 0.5em;
  margin-left: -0.5em;
  margin-right: -0.5em;
  border-bottom: 1px solid currentColor;
  display: block;
}

.rf-card__content {
  padding: 2em 1.5em 1em;
}

.rf-card__text {
  font-size: 0.9em;
  margin-top: 0;
}

.rf-card__link {
  color: var(--color-text-negative);
  background-color: var(--color-cta);
  padding: 1em;
  display: flex;
  justify-content: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Refactored grid component */

.rf-grid {
  display: grid;
}

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

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

/* overrides.css */

/* Reset h1, h2 font override  */
.rf-card__title {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.5em;
}