/* ========================================================= */
/* Components: Typography                                    */
/* ========================================================= */

.sg-typography-preview {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  color: var(--text-typography-preview);
}

.sg-typography-preview h1,
.sg-typography-preview h2,
.sg-typography-preview p {
  color: var(--text-typography-preview);
  margin-top: 0;
}

.sg-typography-preview h1 {
  font-size: calc(var(--font-size-h1) * 1.2);
}

.sg-typography-preview h2 {
  font-size: calc(var(--font-size-h2) * 1.2);
}