.transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  overflow: hidden;
  pointer-events: none;
  background-color: transparent;
  contain: layout paint;
}

.transition.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.transition.is-covering {
  pointer-events: all;
}

.transition-block {
  aspect-ratio: 1;
  background-color: #BBA782;
  opacity: 1;
  width: 100%;
  will-change: opacity;
}

body.is-page-transitioning {
  cursor: progress;
}

@media screen and (max-width: 767px) {
  .transition {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media screen and (max-width: 479px) {
  .transition {
    grid-template-columns: repeat(4, 1fr);
  }
}