:root {
  --grid: repeat(1,minmax(0,1fr));
  --blog-roll-spacing: .75rem;
}

.blog__banner--grid {
  display: grid;
  gap: .5rem;
  grid-template-columns: var(--grid);
}

.blog__banner {
  padding: var(--blog-roll-spacing);
  border: 1px solid var(--gray-light);
  border-radius: var(--rounded-lg);
  display: flex;
  flex-direction: column;
}

.blog__banner > strong,
.blog__banner > p,
.blog__banner .meta {
  margin-top: 0;
  margin-bottom: var(--blog-roll-spacing);
}

.blog__banner > strong {
  font-size: var(--font-size-lg);
}

@media screen and (min-width: 768px) {
  :root {
    --grid: repeat(3,minmax(0,1fr));
  }
}