.hero-bg {
   &__wrapper {
   }

   &__logo {
      position: absolute;
      top: 90px;
      right: 50%;
      transform: translateX(50%);
      width: 252px;
      height: 252px;
      z-index: 1;

      @include _Tablet {
         top: 109px;
         width: 409px;
         height: 409px;
      }

      @include _XSDesktop {
         top: 50%;
         right: -90px;
         transform: translateY(-50%);
      }
      @include _Desktop {
         width: 422px;
         height: 422px;
         right: -60px;
      }
      @include _HDesktop {
         width: 655px;
         height: 655px;
         right: -30px;
      }
   }

   &__media {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      &::after {
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.5);
         z-index: 1;
      }
   }

   &__video {
      height: 100%;
      video {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
   }

   &__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
   }
}
