.hero-banner{
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  transition:var(--transition-fast);

  @media (width < 1024px){
    padding:var(--space-md);
  }

  @media (width >= 1024px){
    padding:var(--space-xl);
  }

  .hero-banner__media{
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:1;

    & *{
      height:100%;
      -o-object-fit:cover;
      object-fit:cover;
      width:100%;
    }

    picture,
    video{
      left:0;
      position:absolute;
      top:0;
    }
  }

  .hero-banner__inner{
    align-items:center;
    color:var(--color-text-secondary);
    display:flex;
    flex-direction:column;
    height:100%;
    justify-content:center;
    margin-inline:auto;
    max-width:var(--l-max-width);
    text-align:center;
    width:100%;
    z-index:1;

    @media (width < 1024px){
      row-gap:var(--space-lg);
    }

    @media (width >= 1024px){
      row-gap:var(--space-xl);
    }
  }

  .hero-banner__title{
    text-shadow:0.2rem 0.4rem 0.2rem var(--color-black);
  }

  .hero-banner__text{
    text-shadow:0.2rem 0.2rem 0.15rem var(--color-black);
  }

  .hero-banner__links{
    align-items:center;
    align-self:center;
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-lg);
    justify-content:center;
  }
}

.hero-banner--simple{
  min-height:50rem;
}