.highlight {
  --highlight-column-gap: 3rem;
  background-color: var(--background-color);
  padding: 3.5rem var(--layout-gutter);
}
.highlight + .highlight {
  margin-top: 0;
}
.highlight.l-grid {
  gap: 2rem;
}
@media (min-width: 580px) {
  .highlight.l-grid {
    gap: 0 10%;
  }
}
.highlight .text-component {
  padding: 0;
}

.highlight__title {
  color: var(--heading-color);
}
@media (min-width: 580px) {
  .highlight__title {
    grid-area: 1/1/2/3;
  }
}
.highlight--centered .highlight__title {
  text-align: center;
}

.highlight--center-vertically {
  align-items: center;
}

@media (min-width: 580px) {
  .highlight__first-column {
    grid-area: 2/1/3/2;
  }
}
.highlight__first-column > * + * {
  margin-top: var(--highlight-column-gap);
}

@media (min-width: 580px) {
  .highlight__second-column {
    grid-area: 2/2/3/3;
  }
}
.highlight__second-column > * + * {
  margin-top: var(--highlight-column-gap);
}

@media (max-width: 580px) {
  .highlight__second-column:has(.l-section--media) {
    order: -1;
  }
}