.hero {
  align-items: stretch;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.hero-body {
  flex-grow: 1;
  padding: $default-hero-size 1rem;
}

.hero-small {
  .hero-body {
    padding-top: $default-hero-size - 2;
    padding-bottom: $default-hero-size - 2;
  }
}

.hero-large {
  .hero-body {
    padding-top: $default-hero-size + 2;
    padding-bottom: $default-hero-size + 2;
  }
}

.hero-extra-large {
  .hero-body {
    padding-top: $default-hero-size + 4;
    padding-bottom: $default-hero-size + 4;
  }
}