.parallax-div {
  position: relative;
  justify-content: center;
  align-content: center;
  max-width: 100vw;
  aspect-ratio: 16 / 9;
  border-width: 0px;
  border-style: solid;
  border-color: red;
  overflow: hidden;
  /* margin-bottom: 50vw; */

  border: red solid 0px;

    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 95%, transparent 100%);

}




.parallax-div img {
  width: 100%;
  height: auto;
  position: absolute;
}

.parallax-div img.street-sky {
  z-index: 1;
  position: absolute;
  margin-top: 0px;
  top: 0;
  left: 0;
}

.parallax-div img.street-far {
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0;
  transform: translateY(40px);
}

.parallax-div img.street-mid {
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0;
  transform: translateY(40px);
}

.parallax-div img.street-front {
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  transform: translateY(46px);
}

@media (min-width: 500px) {

  .parallax-div {
    position: relative;
    justify-content: center;
    align-content: center;
    max-width: 100vw;
    aspect-ratio: 16 / 9;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(9, 255, 0);
    overflow: hidden;
    /* margin-bottom: 50vw; */

  
  }

  .parallax-div img.street-sky {
    z-index: 1;
    position: absolute;
    margin-top: 0px;
    top: 0;
    left: 0;
  }

  .parallax-div img.street-far {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    /* transform: translateY(40px); */
    transform: translateY(22px);
  }

  .parallax-div img.street-mid {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    /* transform: translateY(40px); */
    transform: translateY(28px);
  }

  .parallax-div img.street-front {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    /* transform: translateY(46px); */
    transform: translateY(28px);
  }

}


@media (min-width: 600px) {
  .parallax-div {
    position: relative;
    justify-content: center;
    align-content: center;
    max-width: 100vw;
    aspect-ratio: 16 / 9;
    border-width: 0px;
    border-style: solid;
    border-color: rgb(42, 56, 253);
    overflow: hidden;
    /* margin-bottom: 50vw; */

  }

   .parallax-div img.street-far {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    /* transform: translateY(40px); */
    transform: translateY(20px);
  }

  .parallax-div img.street-mid {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    /* transform: translateY(40px); */
    transform: translateY(25px);
  }

  .parallax-div img.street-front {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    /* transform: translateY(46px); */
    transform: translateY(27px);
  }


}


@media (min-width: 700px) {

  .parallax-div {
    position: relative;
    justify-content: center;
    align-content: center;
    max-width: 100vw;
    aspect-ratio: 16 / 9;
    border-width: 0px;
    border-style: solid;
    border-color: red;
    overflow: hidden;
    /* margin-bottom: 50vw; */

  }


  .parallax-div img.street-sky {
    z-index: 1;
    position: absolute;
    margin-top: 0px;
    top: 0;
    left: 0;
  }

  .parallax-div img.street-far {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    transform: translateY(36px);
  }

  .parallax-div img.street-mid {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    transform: translateY(40px);
  }

  .parallax-div img.street-front {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translateY(42px);
  }

}


@media (min-width: 1000px) {

  .parallax-div {
    position: relative;
    justify-content: center;
    align-content: center;
    max-width: 100vw;
    aspect-ratio: 16 / 9;
    border-width: 0px;
    border-style: solid;
    border-color: rgb(192, 224, 10);
    overflow: hidden;
    /* margin-bottom: 50vw; */

  }


  .parallax-div img.street-sky {
    z-index: 1;
    position: absolute;
    margin-top: 0px;
    top: 0;
    left: 0;
  }

  .parallax-div img.street-far {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    transform: translateY(40px);
  }

  .parallax-div img.street-mid {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    transform: translateY(40px);
  }

  .parallax-div img.street-front {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translateY(46px);
  }

}