body.light .lv-banner {
  --fade-col: hsl(var(--base-hue), 100%, 95%);
  color: black;
}
.lv-banner {
  --fade-col: black;
  --url: hsl(var(--base-hue), 20%, 50%);
  --direction: 110deg;
  --black-amount: 30%;
  --alpha: 80%;
  min-height: 70vh;
  font-size: 24px;
  color: white;
  padding: 5rem 7rem;
  background: linear-gradient(var(--direction), var(--fade-col) var(--black-amount), transparent var(--alpha)), var(--url), black;
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: bottom;
  background-size: cover;
}
.lv-banner .left {
  width: 50%;
}
.lv-banner img {
  width: 70%;
  align-self: center;
  max-height: 250px;
  object-fit: contain;
}
@media only screen and (max-width: 767px) {
  .lv-banner {
    --direction: 190deg;
    --black-amount: 0%;
    --alpha: 200%;
    padding-inline: 1rem;
  }
  .lv-banner img {
    width: calc(100vw - 20px);
  }
  .lv-banner .left {
    width: 100%;
  }
}