world-game/src/styles/layout.css

/* Golden Grid */
.golden-grid {
  height: 100vh !important;
  min-height: 100% !important;
  display: grid !important;
  position: relative;
  grid-template-rows: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 2fr 4fr 2.66fr 5.33fr 5.33fr 4.33fr 2.83fr 3.5fr 3.5fr 2.83fr 4.33fr 5.33fr 5.33fr 2.66fr 4fr 2fr 1fr 1fr;
  text-align: center;
}

.slide {
  overflow-y: hidden;
}

/* Pages scrollables (blog, article, etc.) */
.page-scrollable {
  height: 100%;
  overflow-y: auto;
}

/* Vertical Lines */
.vertical-line {
  z-index: var(--z-base);
  border-left: 0.1px solid rgba(238, 238, 238, 0.2);
  height: 150%;
  pointer-events: none;
}

.vertical-line-start {
  z-index: var(--z-base);
  border-left: 0.1px solid rgba(238, 238, 238, 0.2);
  grid-area: 1/6 / span 20 / span 1;
  height: 150%;
}

.vertical-line-center {
  z-index: var(--z-base);
  border-left: 0.1px solid rgba(238, 238, 238, 0.2);
  grid-area: 1/11 / span 20 / span 1;
  height: 150%;
}

.vertical-line-end {
  z-index: var(--z-base);
  border-left: 0.1px solid rgba(238, 238, 238, 0.2);
  grid-area: 1/16 / span 20 / span 1;
  height: 150%;
}

@media screen and (min-width: 700px) {
  .mobile-only {
    display: none;
  }
}

@media screen and (max-width: 700px) {
  .mobile-only {
    display: inherit;
  }
  .desktop-only {
    display: none;
  }
}