/* More spacing above the hero content so it never overlaps the fixed header */
:root {
  --header-clearance-desktop: 168px;
  --header-clearance-tablet: 148px;
  --header-clearance-mobile: 128px;
}

#intro.aws-hero,
.aws-hero {
  margin-top: 0 !important;
  padding-top: var(--header-clearance-desktop) !important;
  padding-bottom: 92px !important;
}

#intro.aws-hero .aws-hero-layout {
  padding-top: 18px !important;
}

@media (max-width: 991px) {
  #intro.aws-hero,
  .aws-hero {
    padding-top: var(--header-clearance-tablet) !important;
    padding-bottom: 76px !important;
  }
  #intro.aws-hero .aws-hero-layout {
    padding-top: 14px !important;
  }
}

@media (max-width: 767px) {
  #intro.aws-hero,
  .aws-hero {
    padding-top: var(--header-clearance-mobile) !important;
    padding-bottom: 62px !important;
  }
  #intro.aws-hero .aws-hero-layout {
    padding-top: 10px !important;
  }
}