.hero {
  text-align: center;
  display: table;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: $section-horizontal-spacing;
  background-size: cover;
  background-position: center;

  &__logo {
    height: 52px;
    width: auto;

    @include tablet {
      height: 85px;
    }

    @include desktop {
      height: 132px;
    }
  }

  &__text {
    color: color("white");
    margin: 0;
    @include font-size($font-superhero-mobile);

    @include tablet {
      @include font-size($font-hero);
    }
  }

  &__content {
    display: table-cell;
    vertical-align: middle;
    padding: 30px 0;

    @include tablet {
      padding: 80px 0;
    }
  }
}

.hero--sidekick {
  text-align: left;
  height: 300px;
  padding-left: 27.5px;

  .hero__text {
    @include font-size($font-sidekick);
  }
}