.hero {
  margin-bottom: $global-margin*2;

  > a {
    @include grid-row($behavior: colapse);
    color: $black;
  }

  &__image {
    @include grid-column(12, 0);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 250px;

    @include breakpoint (large) {
      @include grid-column(7, 0);
    }
  }

  &__body {
    @include grid-column(12);
    background-color: map-deep-get($foundation-palette, secondary);
    border-radius: 0 0 rem-calc(20) ;

    @include breakpoint (large) {
      @include grid-column(5);
    }
  }

  &__headline {
    padding-top: $global-padding*2;

    h2 {
      color: map-deep-get($foundation-palette, tertiary);
    }
  }

  &__content {
    padding-left: $global-padding;
    padding-right: $global-padding;
  }

  &__meta {
    padding-bottom: $global-padding*2 !important;
  }
}