body.generic-preview .heading.heading--page {
  font-size: 2rem;
  margin: 0;
  opacity: 1;
  animation: none;
  grid-column: r3 / r8;
  align-self: center;
}

body.generic-preview header .res-switch {
  display: flex;
  grid-column: r12 / r12;
  gap: 0.5rem;
}

body.generic-preview header .res-switch button {
  width: 4.8rem;
  height: 4.8rem;
  cursor: pointer;
}

body.generic-preview header .res-switch button svg {
  fill: #2d2d2d;
}

body.generic-preview header {
  padding: 1.8rem 3.6rem;
  position: sticky;
  background-color: #fff;
  opacity: 0;
  animation: 300ms ease-out 0ms 1 slideInFromBottom forwards;
}

body.generic-preview main.flex-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.6rem 3.6rem;
  /*min-height: 100vh;*/
}

body.generic-preview main .preview-canvas {
  width: 100%;
  max-width: 960px;
  min-width: 320px;
  transition: max-width 0.75s ease-in-out;
}

body.generic-preview main .preview-canvas.desktop {
  max-width: 960px;
}

body.generic-preview main .preview-canvas.mobile {
  max-width: 320px;
}

@media (max-width: 600px) {
  body.generic-preview .heading.heading--page {
    grid-column: r1 / r8;
  }

  body.generic-preview header .res-switch {
    grid-column: r10 / r12;
  }

  body.generic-preview header .res-switch svg {
    width: 42px;
    height: 42px;
  }
}