.layer:not(.hero-content) {
  position: absolute;
  width: 110%;
  height: 110%;
  top: -5%;
  left: -5%;
  /* background-size: cover;
        background-position: center; */
  will-change: transform;
  transform: translate3d(0, 80px, 0); /* start lower */
  opacity: 0;
  pointer-events: none;
}

.bl {
  background: transparent url("../assets/bl.png") no-repeat;
  background-position: bottom left;
  opacity: 0.9;
}
.br {
  background: transparent url("../assets/br.png") no-repeat;
  background-position: bottom right;
  opacity: 0.9;
}
.fr {
  background: transparent url("../assets/fr.png") no-repeat;
  background-position: bottom right;
  z-index: 10;
}
.fl {
  background: transparent url("../assets/fl.png") no-repeat;
  background-position: bottom left;
  z-index: 10;
}
.top {
  background: transparent url("../assets/top.png") no-repeat;
  background-position: top center;
  z-index: 10;
}
.top{
  background-size:100%;
  z-index:1;
}
.bl,
.br,
.fr,
.fl {
  background-size: 600px;
}

@media (min-width: 1000px) {
  .bl,
  .br,
  .fr,
  .fl {
    background-size: 1000px;
  }
}

@media (min-width: 1500px) {
  .bl,
  .br,
  .fr,
  .fl {
    background-size: 1500px;
  }
}