.main-grid-container {
  position: fixed;
  display: grid;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transform-style: preserve-3d;

  grid-template-columns: repeat(112, 1fr);
  grid-template-rows: repeat(28, 1fr);
  height: 200dvh !important;
  width: 800dvh !important;
  aspect-ratio: 4 / 1;
  gap: 1px;
}

.grid-line-divs {
  background-color: var(--grid-item-bg-color);
}

.grid-container-background {
  position: absolute;
  background-color: var(--grid-border-color);

  background-size: contain;
  transform-origin: center center;
  z-index: -1;
  width: 100%;
  height: 100%;

  background-color: var(--grid-border-color);
}

.outer-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -99;
}

.perspective-wrapper {
  width: 100%;
  height: 100%;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.divs-host {
  position: fixed;
  display: grid;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transform-style: preserve-3d;

  height: 200dvh !important;
  width: 800dvh !important;

  position: relative;
  box-shadow: none;
  border: none;

  clip-path: inset(0 0 0 0);

  transition: transform 0.6s ease-in-out, clip-path 0.4s ease-in-out,
    scale 0.4s ease-in-out;
  will-change: transform;
}

.grid-item-unsel {
  background-color: var(--grid-item-bg-color);
  color: var(--darkest-color);
  box-shadow: var(--box-shadow-black);
  display: flex;
  align-items: center;
  justify-content: center;
}

.divs-host.state-0,
.divs-host.state-1,
.divs-host.state-3,
.divs-host.state-4,
.divs-host.state-5 {
  transform: translate(-50%, -50%);
  clip-path: inset(0 0 0 0);
}

.divs-host.state-6,
.divs-host.state-7,
.divs-host.state-8,
.divs-host.state-9,
.divs-host.state-10,
.divs-host.state-11 {
  transform: translate(-50%, -50%);
  clip-path: inset(0 0 0 0);
}
/* 
.divs-host::after {
  transition: opacity 0.6s ease-in-out;
  will-change: transform, opacity;
  z-index: 2;
}

.state-0.divs-host::after,
.state-1.divs-host::after,
.state-3.divs-host::after,
.state-4.divs-host::after,
.state-5.divs-host::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;

  opacity: 0;
  background: var(--grid-white-gradient);
}

.state-6.divs-host::after,
.state-7.divs-host::after,
.state-8.divs-host::after,
.state-9.divs-host::after,
.state-10.divs-host::after,
.state-11.divs-host::after {
  position: absolute;
  content: "";
  width: 110%;
  height: 110%;
  z-index: 2;

  opacity: 0;
  background: var(--grid-white-gradient);
} */

/* MAIN */
.main-canvas {
  position: relative;
  width: 214.28571429dvh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 1;
  will-change: opacity;
  transition: opacity 0.2s ease-in-out;
  will-change: opacity, transform;
}