<main class="container">
      <h1 class="title">Latest
Articles</h1>
      <div class="grid-cards">
        <article class="card">
            <div class="card__image"></div>
            <div class="card__body">
                <h2 class="card__title">Learning Resources In Challenging Times: Online Workshops, Meetups And Events</h2>
                <div class="card__details">
                    <span>Iris Lješnjanin</span>
                    <time class="article-header--date" datetime="2020-05-15">May 15, 2020</time>
                </div>
            </div>
        </article>
        <article class="card">
            <div class="card__image"></div>
            <div class="card__body">
                <h2 class="card__title">Accessible Images For When They Matter Most
</h2>
                <div class="card__details">
                    <span>Iris Lješnjanin</span>
                    <time class="article-header--date" datetime="2020-05-15">May 15, 2020</time>
                </div>
            </div>
        </article>
               <article class="card">
            <div class="card__image"></div>
            <div class="card__body">
                <h2 class="card__title">LSmashing Meets! Free Online Meetups On May 18th And 19th 2020</h2>
                <div class="card__details">
                    <span>
Rachel Andrew</span>
                    <time class="article-header--date" datetime="2020-05-15">May 14, 2020</time>
                </div>
            </div>
        </article>
      </div>
    
     <div class="load-more"><a href="#" class="button">See all articles</a>
        </div>
    </main>

/* Variables */
:root {
  --color-primary: #d33a2c;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.75rem;
  --text-4xl: 2rem;
  --line-height-xs: 1.2;
  --line-height-sm: 1.4;
  --line-height-md: 1.6;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
}
@media (min-width: 544px) {
  :root {
    --text-xl: 1.875rem;
    --text-2xl: 2rem;
    --text-3xl: 2.25rem;
    --text-4xl: 2.5rem;
    --md_space-2xs: var(--space-2xs);
    --md_space-xs: var(--space-xs);
    --md_space-sm: var(--space-sm);
    --md_space-md: var(--space-md);
    --md_space-lg: var(--space-lg);
    --md_space-xl: var(--space-xl);
    --md_space-2xl: var(--space-2xl);
  }
}
@media (min-width: 768px) {
  :root {
    --text-2xl: 2.25rem;
    --text-3xl: 3rem;
    --text-4xl: 4rem;
    --lg_space-2xs: var(--space-2xs);
    --lg_space-xs: var(--space-xs);
    --lg_space-sm: var(--space-sm);
    --lg_space-md: var(--space-md);
    --lg_space-lg: var(--space-lg);
    --lg_space-xl: var(--space-xl);
    --lg_space-2xl: var(--space-2xl);
  }
}
@media (min-width: 1012px) {
  :root {
    --xl_space-2xs: var(--space-2xs);
    --xl_space-xs: var(--space-xs);
    --xl_space-sm: var(--space-sm);
    --xl_space-md: var(--space-md);
    --xl_space-lg: var(--space-lg);
    --xl_space-xl: var(--space-xl);
    --xl_space-2xl: var(--space-2xl);
  }
}
body {
  font-family: system-ui;
  font-size: var(--text-md);
  line-height: var(--line-height-md);
}

h1, h2, h3 {
  font-weight: bold;
  line-height: var(--line-height-xs);
}

h1 {
  font-size: var(--text-4xl);
}

h2 {
  font-size: var(--text-3xl);
}

h3 {
  font-size: var(--text-2xl);
}

.card__body {
  padding: var(--space-md);
}
.card__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
}
.card__image {
  padding-bottom: 56%;
  background-color: var(--color-primary);
}
.card__details {
  font-size: var(--text-sm);
  opacity: .6;
}
.card__details > * + * {
  margin-left: var(--space-md);
}

.button {
  text-decoration: none;
  font-weight: 600;
  color: currentcolor;
  border: 2px solid var(--color-primary);
  border-radius: 5px;
  padding: var(--space-md) var(--lg_space-xl, var(--space-md));
}

.load-more {
  text-align: center;
  padding: var(--xl_space-2xl, var(--space-xl)) 0;
}

.title {
  margin-bottom: var(--lg_space-xl, var(--space-md));
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--lg_space-xl, var(--space-md));
}

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--xl_space-2xl, var(--lg_space-xl, var(--space-md)));
}