preview.css

/* For Preview Only */

.preview-hero-title {
  padding: 1rem 2rem;
  font-size: 2.25rem;
  font-weight: normal;
}

.preview-nav {
  padding: 1rem 2rem;
}

.preview-title {
  margin: 0 0 2rem;
  font-size: 1.5rem;
  font-weight: normal;
}

.preview-section {
  padding: 2rem;
}

.preview-group {
  display: grid;
  grid-gap: 1rem;
}

.preview-theme-group {
  display: grid;
  align-items: start;
  grid-gap: 2rem;
}

@media (min-width: 80rem) {
  .preview-theme-group {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.preview-buttons {
  display: grid;
  justify-content: start;
  grid-gap: 1rem;
  grid-template-columns: repeat( auto-fit, minmax(8rem, 12rem) );
}

.preview-form {
  display: grid;
  grid-gap: 2rem;
}

.preview-light-theme {
  padding: 2rem;
  background: white;
  border: 0.125rem solid var(--color-gray-5);
  border-radius: var(--roundness-2);
}

.preview-dark-theme {
  padding: 2rem;
  background: #010203;
  border: 0.125rem solid var(--color-gray-5);
  border-radius: var(--roundness-2);
}