.hero-banner__container {
  padding-top: var(--hero-banner-padding-top);
  padding-bottom: var(--hero-banner-padding-bottom);

  & .hero-banner__wrapper {
    position: relative;
    width: 100%;
    height: var(--hero-banner-height);
    display: flex;
    align-items: center;
    justify-content: var(--content-block-alignment);

    & .hero-banner__image-wrapper {
      width: 100%;
      height: 100%;

      & .hero-banner__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    & .hero-banner__content {
      position: absolute;
      width: min(var(--content-block-width, 100%), 100%);
      z-index: 2;

      & .hero-banner__heading {
        text-align: var(--text-alignment);
        text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
        font-size: 32px;
        font-style: normal;
        font-weight: 300;
        line-height: 100%;
        letter-spacing: 0;
        margin: 0;
      }

      & .hero-banner__subheading {
        text-align: var(--text-alignment);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 131%;
        letter-spacing: 0;
        margin: 22px 0 0;
        color: rgba(var(--color-foreground), 1);
      }

      & .hero-banner__rating {
        height: 18px;
        display: flex;
        align-items: center;
        margin: 12px 0 0;

        & svg {
          height: 100%;
          width: auto;

          & g {
            fill: rgb(var(--color-button-text));
          }
        }
      }
    }

    & .hero-banner__content.page-width {
      padding-left: 26px;
      padding-right: 26px;
    }
  }
}

@media screen and (min-width: 768px) {
  .hero-banner__container {
    padding-top: var(--hero-banner-padding-top);
    padding-bottom: var(--hero-banner-padding-bottom);

    & .hero-banner__wrapper {
      height: var(--hero-banner-height);

      & .hero-banner__content {
        & .hero-banner__heading {
          font-size: 70px;
        }

        & .hero-banner__subheading {
          font-size: 18px;
          margin: 35px 0 0;
        }

        & .hero-banner__rating {
          display: none !important;
          margin: 22px 0 0;
        }
      }

      & .hero-banner__content.page-width {
        padding-left: 60px;
        padding-right: 60px;
        max-width: 1392px;
      }
    }
  }
}