.hero-flow {
  @include make-row();

  &__hero {
    margin-bottom: map-get($spacers, block);
    @include make-col-ready();
    @include media-breakpoint-up(lg) {
      @include make-col(7);
    }
    @include media-breakpoint-up(xl) {
      @include make-col(8);
    }
  }

  &__list {
    margin-bottom: map-get($spacers, block);
    @include make-col-ready();
    @include media-breakpoint-up(lg) {
      @include make-col(5);
    }
    @include media-breakpoint-up(xl) {
      @include make-col(4);
    }
  }

  &__header {
    @include theme-card-header();
    margin-right: $grid-gutter-width * 0.5;
    margin-bottom: $marko-web-node-list-padding;
    margin-left: $grid-gutter-width * 0.5;

    &:empty {
      display: none;
    }

    a {
      @include theme-card-header-link();
    }
  }

  &--reverse {
    flex-direction: row-reverse;
  }
}