:root {
  --hover-transition: 0.3s ease-in-out;
}

.bg-banner {
  background-repeat: no-repeat;
  background-size: 104% auto;
  background-position: center;
  overflow: hidden;
  transition: var(--hover-transition);
}

.bg-banner:hover {
  background-size: 110% auto;
}

.bg-about {
  background-repeat: no-repeat;
}

@media (min-width: 0) {
  .bg-banner {
    background-image: none;
  }

  .bg-about {
    background-image: url(../img/webp/bg_about.webp);
    background-size: 50% auto;
    background-position: center 97%;
  }
}

@media (min-width: 768px) {
  .bg-about {
    background-size: 45% auto;
  }
}

@media (min-width: 1200px) {
  .bg-banner {
    background-image: url(../img/webp/bg_front.webp), url(../img/webp/bg_back.webp);
    background-repeat: no-repeat, no-repeat;
    background-position: 93% center, 106% 120%;
    background-size: auto 106%, auto 56%;
    transition: var(--hover-transition);
  }

  .bg-banner:hover {
    background-position: 94% center, 107% 121%;
    background-size: auto 110%, auto 55%;
  }

  .bg-about {
    background-size: 45% auto;
  }
}

@media (min-width: 1400px) {
  .bg-banner {
    background-position: 93% center, 95% 126%;
    background-size: auto 106%, auto 66%;
    transition: var(--hover-transition);
  }

  .bg-banner:hover {
    background-position: 94% center, 95% 128%;
    background-size: auto 110%, auto 65%;
  }

  .bg-about {
    background-size: 20% auto;
    background-position: 4% 75%;
  }
}