/* Columns: two equal columns, each an optional image, a heading and text. */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.columns__item > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--c-surface);
  margin-bottom: 24px;
}
.columns__item > img.columns__logo { object-fit: contain; padding: 16px; }
.columns__item > figure { margin: 0 0 24px; }
.columns__item > figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--c-surface); }
.columns__item > figure figcaption { font-size: 14px; color: var(--c-muted); margin-top: 8px; padding: 0 8px; }
.columns__item h2 { text-align: center; font-size: 24px; margin-bottom: 1em; }
.columns__item p, .columns__item ol { padding: 0 8px; }
/* Side by side, media, heading and text share rows, so the headings line up
   even when one image has a caption. */
@media (min-width: 761px) {
  .columns { row-gap: 0; }
  .columns__item { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
  .columns__item > img.columns__logo { align-self: center; }
}
@media (max-width: 760px) {
  .columns { grid-template-columns: 1fr; }
}