.section-banner-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: black;
}

.section-banner {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  clear: both;
  position: absolute;
  will-change: transform;
}

.section-banner-layer1 {
  width: calc(100vw * 1.2);
  height: calc(100vh * 1.2);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  background-image: url(layer-1.webp);
  overflow: hidden;
  transform: scale(1.2);
  will-change: transform;
  position: absolute;
  z-index: 11;
}
.section-banner-layer2 {
  height: 750px;
  width: 928px;
  max-width: 100vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(layer-2.webp);
  overflow: hidden;
  will-change: transform;
  position: absolute;
  display: none;
  z-index: 13;
  -webkit-transform: translate3d(0, 0, 13px);
  transform: translate3d(0, 0, 13px);
}

.section-banner-info {
  position: absolute;
  color: white;
  content: "test";
  top: 100px;
  left: 50px;
  background: rgba(0, 0, 0, 0.7);
  width: 600px;
  padding: 20px;

  z-index: 80;
  -webkit-transform: translate3d(0, 0, 80px);
  transform: translate3d(0, 0, 80px);

  display: none;
}

.section-banner-blackgradient {
  width: calc(100vw * 1.2);
  height: calc(100vh * 1.2);
  overflow: hidden;
  transform: scale(1.2);
  z-index: 12;
  will-change: transform;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 12%,
    rgba(0, 0, 0, 0) 58%
  );
  background-image: -webkit-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 12%,
    rgba(0, 0, 0, 0) 58%
  );

  position: absolute;
}

.section-banner-logo {
  background-image: url("logo-min.webp");
  background-size: 700px;
  background-position: center;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 14;
}

@media (min-width: 2200px) {
  /*
  .section-banner-layer1 {
    background-color: red;
    background-image: unset;
  }
  */
  .section-banner-layer2 {
    height: 1050px;
    width: 1299px;
  }
}
@media (max-width: 1000px) {
  /*
  .section-banner-layer1 {
    background-color: green;
    background-image: unset;
  }*/
  .section-banner-layer2 {
    height: 600px;
    width: 743px;
  }
}
@media (max-width: 800px) {
  /*
  .section-banner-layer1 {
    background-color: blue;
    background-image: unset;
  }*/
  .section-banner-logo {
    background-size: 350px;
  }
  .section-banner-layer2 {
    height: 600px;
    width: 743px;
    background-position: bottom center !important;
    display: none;
  }
}