.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 1727/469;
  background: linear-gradient(1deg, #151515 0.5%, rgba(115, 115, 115, 0) 30%),
    url("../../assets/images/hero-banner.png") no-repeat center center / cover;

  @media (max-width: 812px) {
    aspect-ratio: 375/190;
    background: url("../../assets/images/hero-banner-mobile.png") no-repeat
      center center / cover;
  }
}