/* Split: text beside media, stacked on small screens */

.split {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
.split__media img {
  width: 100%;
  height: auto;
}
.split--portrait .split__media {
  width: min(280px, 60%);
  margin: 0 auto;
}
.split--portrait .split__media img {
  border-radius: 50%;
}
@media (min-width: 768px) {
  .split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-xl);
  }
  .split--portrait {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }
  .split--portrait .split__media {
    width: 100%;
    max-width: 280px;
    margin: 0;
  }
}