.hero-group {
  .hero-row {
    position: relative;

    padding-top: calculateRem(95);
    padding-right: calculateRem(50);
    padding-bottom: calculateRem(95);
    padding-left: calculateRem(50);

    box-sizing: border-box;

    &.bg-full {
      .hero {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        justify-content: center;
        margin: auto;
        text-align: center;
        h1.title {
          @include breakpoint(mobile) {
            font-size: $mobile-h1-font-size;
          }
          @include breakpoint(tablet) {
            font-size: $h1-font-size;
          }
        }
        h3.subtitle {
          @include breakpoint(mobile) {
            font-size: $mobile-h3-font-size;
          }
          @include breakpoint(tablet) {
            font-size: $h3-font-size;
          }
        }
        p.paragraph {
          @include breakpoint(mobile) {
            font-size: $mobile-base-font-size;
          }
          @include breakpoint(tablet) {
            font-size: $base-font-size;
          }
        }
        .button {
          align-self: center;
        }
      }
    }
  }
}
