$base-image-height: 500px; // ranging from 500 ~ 600, but use 500 since it'll take up a lot of space on mobile devices
$base-image-mobile-height: 400px; // 100 in difference from tablet and desktop, updated to 500 per spacing issue https://dev.azure.com/ArrowEmeaEcs/Education/_workitems/edit/9761?src=WorkItemMention&src-action=artifact_link

.hero-image {
  height: $base-image-height;
  position: relative;

  img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .hero-content-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .container {
    height: 100%;
  }

  .hero-overlay::before {
    content: "";
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: calc(40% + 48px);
    position: absolute;
  }

  .hero-content {
    padding-top: 72px; // updated to max spacing instead of hardcoded value of 104px to accommodate small hero banner in edu
    color: $base-white;

    .title {
      margin-bottom: $base-spacing-3x;
      font-weight: 700;
    }

    .sub-title {
      margin-top: 0;
      margin-bottom: $base-spacing-2x;
    }

    .logo {
      width: 300px;
      img {
        position: relative;
      }
    }

    .body {
      margin-bottom: $base-spacing-3x;
    }
  }

  @media only screen and (max-width: map_get($base-breakpoints, 'xl')) {
    .hero-content {
      padding-top: $base-spacing-3x;
    }
  }

  @media only screen and (min-width: map-get($base-breakpoints, 'lg') + 1) and (max-width: map-get($base-breakpoints, 'lm')) {
    height: 600px;
  }

  @media only screen and (max-width: map-get($base-breakpoints, 'lg')) {
    .hero-overlay::before {
      width: calc(60% + 48px);
    }

    .hero-content {
      padding-top: $base-spacing-3x;

      .title {
        margin-bottom: $base-spacing-1-half;
      }

      .body {
        margin-bottom: $base-spacing-2x;
      }
    }
  }

  @media only screen and (max-width: map-get($base-breakpoints, 'md')) {
    height: $base-image-mobile-height;

    .hero-overlay::before {
      width: 100%;
    }

    .hero-content {
      .logo {
        width: 200px;
      }
    }

    // need to render button-sml instead of button-std on mobile
    .button-std {
      padding: 13px 26px;
      font-size: 13px;
      line-height: 1.0625;
    }
  }
}