/* THIS DOES NOT WORK YET */
.cobalt-parallax--container{
  --parallax-depth: 8px;
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: var(--parallax-depth);
  perspective-origin: 0%;
  /* display: flex;
  flex-direction: column; */
  position:relative;
}

.cobalt-parallax--item{
  --z-placement: 3px;
  --scale: calc(calc(var(--parallax-depth) / var(--z-placement)) / var(--parallax-depth) );
  transform-origin: 0;
  transform: translateZ(var(--z-placement)) scale(var(--scale));
  position: absolute;
}

.cobalt-parallax--bg-parallax {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

:is(html.js [lazy-reveal]){
  opacity: 0;
  transform: translateY(-5%);
  transition: opacity .5s, transform .5s;
  transition-delay: var(--lazy-delay);
}

:is(html.js [lazy-reveal].lazy-reveal--revealed) {
  opacity: 1;
  transform: unset;
}

:is(html.js [lazy-reveal] [lazy-child]) {
  opacity: 0;
  transform: translateY(-5%);
  transition: opacity .5s, transform .5s;
  transition-delay: var(--lazy-delay);
}

:is(html.js [lazy-reveal].lazy-reveal--revealed [lazy-child]) {
  opacity: 1;
  transform: unset;
}

:is(html.js [lazy-reveal].lazy-reveal--reverted [lazy-child]) {
  transition-delay: 0;
}