$navbarHeight: 50px;

.hero {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  @each $color, $value in $colors {
    &.#{$color} {
      background-color: $value;
      color: get-contrast($value);
    }
  }

  .hero-body {
    flex-grow: 1;
    flex-shrink: 0;
    padding: 3rem 1.5rem;

    @media (min-width: $md) {
      padding: 3rem 3rem;
    }
  }

  &.mini {
    .hero-body {
      padding: 1rem;
    }
  }

  &.sm {
    .hero-body {
      padding: 1.7rem;
    }
  }

  @media (min-width: $md) {
    &.lg {
      .hero-body {
        padding: 9rem 4.5rem;
      }
    }
    &.xl {
      .hero-body {
        padding: 18rem 6rem;
      }
    }
  }

  &.half-screen {
    min-height: 50vh;

    .hero-body {
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
  }

  &.full-screen {
    min-height: 100vh;

    .hero-body {
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
  }

  &.full-screen-navbar {
    min-height: calc(100vh - 50px);

    .hero-body {
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
  }
}