.slide-up {
  opacity: 0;
  /*transform: translateY(100px);*/
  transition: opacity 1s ease-out/*, transform 1s ease-out*/;
}

.slide-up.on {
  opacity: 1;
  /*transform: translateY(0);*/
}

.editMode .slide-up{
  opacity:1;
  transform:none;
}
@keyframes opac{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
.overlay-hero {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr; 
  z-index: 1;
  height:100vh;
}

.overlay-hero div {
  background: var(--colorPrimary); 
  animation: hideBlock 1s ease forwards;
}

@keyframes hideBlock {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .overlay-hero div {
    animation: none;
  }
}