/* ========================================================= */
/* Patterns: Text Layouts                                    */
/* ========================================================= */

.sg-text-layout-pattern {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

.sg-text-layout-pattern__preview-surface {
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-large);
  border-radius: var(--radius-card);
  background: var(--surface-text-layout-preview);
}

.sg-text-layout-pattern__sample {
  margin: 0;
}

.sg-text-layout-pattern__sample--full-width {
  width: 100%;
}

.sg-text-layout-pattern__sample--sixty-width {
  width: 60%;
}

.sg-text-layout-pattern__sample--two-column {
  margin: 0;
}

.sg-text-layout-pattern__two-column {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--layout-text-layout-two-column-columns);
  column-gap: var(--layout-text-layout-column-gap);
}

.sg-text-layout-pattern__three-column-distributed {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--layout-text-layout-three-column-columns);
  column-gap: var(--layout-text-layout-column-gap);
}

.sg-text-layout-pattern__column {
  margin: 0;
  min-width: 0;
}

.sg-text-layout-pattern__column--align-left {
  text-align: var(--text-align-text-layout-column-left);
}

.sg-text-layout-pattern__column--align-center {
  text-align: var(--text-align-text-layout-column-center);
}

.sg-text-layout-pattern__column--align-right {
  text-align: var(--text-align-text-layout-column-right);
}

@media (max-width: 767px) {
  .sg-text-layout-pattern__sample--sixty-width,
  .sg-text-layout-pattern__sample--two-column,
  .sg-text-layout-pattern__two-column,
  .sg-text-layout-pattern__three-column-distributed {
    width: 100%;
  }

  .sg-text-layout-pattern__two-column,
  .sg-text-layout-pattern__three-column-distributed {
    grid-template-columns: 1fr;
  }

  .sg-text-layout-pattern__three-column-distributed[data-pattern-part="company-card-metrics-three-column"] {
    grid-template-columns: var(--layout-text-layout-three-column-columns);
  }
}