.banner {
  width: 100%;
  height: 65vh;
  position: relative;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  @media (width >= 1280px) {
    height: 50vh;
  }
}

.banner__image {
  width: 100%;
  height: 65vh;
  overflow: hidden;
  position: absolute;
  z-index: -1;
  @media (width >= 1280px) {
    height: 50vh;
  }
  img {
    width: 100%;
    height: 70vh;
    display: block;
    object-fit: cover;
    object-position: center right;
    @media (width >= 1280px) {
      height: 50vh;
    }
  }
}

.banner__content {
  width: 85%;
  max-width: 100%;
  margin: 0 auto 6.4rem;
  z-index: 999;
  @media (width >= 1280px) {
    padding-right: 20%;
  }
  .title {
    font-size: 4.8rem;
    line-height: 105%;
    margin-bottom: 1rem;
    @media (width >= 1280px) {
      font-size: 4.8rem;
    }
  }
  .description {
    max-width: 60ch;
    font-size: 1.8rem;
  }
}

.banner::before {
  content: "";
  width: 100%;
  height: 65vh;
  background-color: var(--darkGray);
  position: absolute;
  opacity: 0.5;
  z-index: 1;
  @media (width >= 1280px) {
    height: 50vh;
  }
}