: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% bottom, 160% 120%;
    background-size: auto 95%, auto 79%;
    transition: var(--hover-transition);
  }
  .bg-banner:hover {
    background-position: 94% bottom, 164% 120%;
    background-size: auto 96%, auto 78%;
  }
  .bg-about {
    background-size: 45% auto;
  }
}

@media (min-width: 1400px) {
  .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, 100% 125%;
    background-size: auto 106%, auto 86%;
    transition: var(--hover-transition);
  }
  .bg-banner:hover {
    background-position: 94% center, 99% 125%;
    background-size: auto 108%, auto 85%;
  }
  .bg-about {
    background-size: 20% auto;
    background-position: 4% 75%;
  }
}