.background-image {
  position: fixed;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  background-color: black;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.4;
  transition: background-image ease 0.5s;

  &.bg-0 {
    background-image: url("@/images/bg-0.jpg");

    &.webp {
      background-image: url("@/images/bg-0.webp");
    }
  }

  &.bg-2 {
    background-image: url("@/images/bg-2.jpg");

    &.webp {
      background-image: url("@/images/bg-2.webp");
    }
  }

  &.bg-5 {
    background-image: url("@/images/bg-5.jpg");

    &.webp {
      background-image: url("@/images/bg-5.webp");
    }
  }

  &.bg-6 {
    background-image: url("@/images/bg-6.jpg");

    &.webp {
      background-image: url("@/images/bg-6.webp");
    }
  }

  &.bg-7 {
    background-image: url("@/images/bg-7.jpg");

    &.webp {
      background-image: url("@/images/bg-7.webp");
    }
  }

  &.bg-8 {
    background-image: url("@/images/bg-8.jpg");

    &.webp {
      background-image: url("@/images/bg-8.webp");
    }
  }

  &.bg-404 {
    background-image: url("@/images/bg-404.jpg");

    &.webp {
      background-image: url("@/images/bg-404.webp");
    }
  }
}
