.hero {
  width: 100%;
  height: 80vh;
  display: flex;
  align-items: flex-end;
  position: relative;
  color: var(--white);
  overflow: hidden;
  @media (width >= 1280px) {
    height: 60vh;
  }
  .hero__image {
    width: 100%;
    position: absolute;
    z-index: -1;
    img {
      width: 100%;
      object-fit: cover;
      object-position: top right;
      height: 80vh;
      display: block;
    }
    @media (width >= 1280px) {
      object-position: 0 0 0 0;
      height: 60vh;
    }
  }
  .hero__container {
    width: calc(100% - 15%);
    margin: 0 auto 6.4rem;
    z-index: 999;
    @media (width >= 1280px) {
      padding-right: 30%;
    }
    @media (width >= 1600px) {
      padding-right: 35%;
    }
    @media (width >= 1720px) {
      padding-right: 50%;
    }
  }
  .hero__title {
    font-size: 4rem;
    margin-bottom: 1rem;
    font-family: var(--fontTitle-Regular);
    @media (width >= 1280px) {
      font-size: 4.8rem;
    }
  }
  .hero__description {
    font-size: 1.6rem;
    margin-bottom: 4rem;
    @media (width >= 1280px) {
      font-size: 1.8rem;
    }
  }
  .hero__action {
    display: inline-block;
    padding: 1.2rem 2.4rem;
    background-color: #ec0000;
    font-size: 1.6rem;
    font-family: "SantanderMicroText-Regular";
    color: white;
    border-radius: 50rem;
    line-height: 100%;
    border: none;
    cursor: pointer;
  }
}

.hero::after {
  content: "";
  background-color: #000;
  width: 100%;
  height: 80vh;
  position: absolute;
  padding: 0;
  z-index: 1;
  opacity: 0.55;
  @media (width >= 1280px) {
    height: 60vh;
  }
}