/* hero-banner--primary */
.hero-banner--primary {
  --banner-min-height: 100vh;
  --banner-px: var(--sp20);
  --banner-py: var(--sp14);
  --banner-text-mw: 590px;
  --banner-title-description-gap: var(--sp6);
  --banner-content-m-r: var(--sp11);
  min-height: var(--banner-min-height);
  position: relative;
}

.hero-banner--primary .hero-banner {
  height: 100%;
  position: relative;
}

.hero-banner--primary .hero-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.hero-banner--primary .overlay-bg {
  --overlay-color: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.41) 0%,
      /* top: 41% opacity */
      rgba(0, 0, 0, 0) 100%
      /* bottom: fully transparent */
    );
}

.hero-banner--primary .hero-bg {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero-banner--primary .hero-content-wrapper {
  position: relative;
}

.hero-content-wrapper>* {
  padding: var(--banner-py) var(--banner-px);
}

/* banner content */
.hero-banner--primary .hero-content {
  --section-body-clr: var(--clr-white);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: calc(var(--banner-content-m-r) + var(--banner-px));
  /* margin-right: var(--banner-content-m-r); */
  position: relative;
}

.hero-banner--primary .hero-text {
  max-width: var(--banner-text-mw);
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--banner-title-description-gap);
}

.hero-banner--primary .hero-title {
  line-height: 0.91428;
  margin-bottom: 0;
}

.hero-banner--primary .hero-description {
  --text-lh: 1.444;
}

/* banner bottom */
.hero-banner--primary .hero-banner-bottom {
  --banner-py: var(--sp18);
  position: relative;
  padding-top: 0;
}

.hero-banner--primary .hero-banner-bottom:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 200px);
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%,
      /* top: fully transparent */
      rgba(0, 0, 0, 0.9) 50%,
      /* middle: 90% opacity */
      rgba(0, 0, 0, 0.95) 100%
      /* bottom: 95% opacity */
    );
}