/* @todo: convert to scss */
/* // * Hero banner  */
.hero-banner {
  background-color: var(--m-color-body);
}

.hero-banner > .content {
  padding-inline: var(--m-page-spacing-x);
  margin-block-start: calc(var(--m-typography-heading-1-line-height));
  position: relative;
}
.has-fade.hero-banner > .content {
  margin-block-start: calc(-1 * var(--m-typography-heading-1-line-height));
}

.hero-banner__title,
.hero-banner__title-affix {
  line-height: var(--m-typography-heading-1-line-height);
  display: inline;
}
.hero-banner__title {
  font-size: var(--m-typography-heading-1-font-size);
}
.hero-banner__title-affix {
  font-size: calc(var(--m-typography-heading-1-font-size) * 0.875);
  color: var(--m-color-tertiary);
  margin-left: var(--m-spacing-x-4);
  font-weight: 400;
}

.hero-banner__subtitle {
  font-size: 0.875rem;
  line-height: 1.375rem;
  margin: 0.875rem 0 0;
}

.hero-banner__background {
  position: relative;
}
.has-fade .hero-banner__background:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(3 * var(--m-typography-heading-1-line-height));
  background-image: linear-gradient(180deg, hsla(var(--m-color-body-hsl) / 0) 0%, hsla(var(--m-color-body-hsl) / 81%) 62%, hsla(var(--m-color-body-hsl) / 100%) 100%);
}
.hero-banner__background img,
.hero-banner__background video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@media screen and (max-width: 767.98px) {
  .hero-banner__background {
    height: calc((100svh - var(--m-header-height)) / 2);
  }
  .hero-banner__background:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(3 * var(--m-typography-heading-1-line-height));
    background-image: linear-gradient(0deg, rgba(153, 153, 153, 0) 6%, rgba(0, 0, 0, 0.62) 94%);
  }

  .hero-banner__subtitle * {
    margin: 0;
  }
  .hero-banner__subtitle * + * {
    margin-top: 0.875rem;
  }
}

@media screen and (min-width: 768px) {
  .hero-banner > .content {
    padding-inline: calc(2 * var(--m-column-width-responsive));
  }

  .hero-banner__background {
    height: 20rem; /* 320px */
  }

  .hero-banner__subtitle {
    font-size: 1.25rem;
    line-height: 1.9375rem;
    margin-top: 1.25rem;
  }
}

@media screen and (min-width: 992px) {
  .hero-banner__background {
    height: 26.5625rem; /* 425px */
  }
}

@media screen and (min-width: 1200px) {
  .hero-banner__background {
    height: 32rem; /* 512px */
  }
}

@media screen and (min-width: 1400px) {
  .hero-banner__background {
    height: 37.8125rem; /* 605px */
  }

  .hero-banner__subtitle {
    font-size: 1.5625rem;
    line-height: 2.5rem;
    margin-top: 1.5625rem;
  }
}

@media screen and (min-width: 1600px) {
  .hero-banner__background {
    height: 43.75rem; /* 700px */
  }
}