.keyart {
  position: relative;
  z-index: 10;

  .keyart_layer {
    background-repeat: no-repeat;
    background-size: 100%;    
    height: 50svh;
    position: absolute;
    width: 100%;

    &.parallax {
      position: fixed;
    }
  }
}

#keyart-0 {
  background-image: url('../../images/home/hero/sky.svg');
  background-position: center top;
  z-index: 11;
}

#keyart-1 {
  background-image: url('../../images/home/hero/mountains.svg');
  background-position: center bottom;
  z-index: 12;
}

#keyart-2 {
  background-image: url('../../images/home/hero/peak.svg');
  background-position: center bottom;
  z-index: 13;
}

#keyart-3 {
  background-image: url('../../images/home/hero/canyon.svg');
  background-position: center bottom;
  z-index: 14;
}

#keyart-4 {
  background-image: url('../../images/home/hero/trees.svg');
  background-position: left bottom;
  z-index: 15;
}

#keyart-5 {
  background-image: url('../../images/home/hero/rocks.svg');
  background-position: right bottom;
  background-size: 30%;
  z-index: 16;
}

#keyart-6 {
  background-image: url('../../images/home/hero/canyon.svg');
  background-position: center bottom;
  display: none;
  z-index: 17;
}

@media (min-width: 1200px), (min-aspect-ratio: 3/2) {

  .keyart {

    .keyart_layer {
      height: 190svh;
    }
  }

  #keyart-0 {
    background-position: center top;
  }

  #keyart-1 {
    background-position: center 90px;
  }

  #keyart-2 {
    background-position: center top;
  }

  #keyart-3 {
    background-position: center 30px;
  }

  #keyart-4 {
    background-position: center -200px;
  }

  #keyart-5 {
    background-position: right 120px;
  }

  #keyart-6 {
    background-position: center bottom;
    display: block;
  }
}

@media (min-height: 660px), (min-width: 2100px) {

}