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

.sg-page-text-layouts {
  background: var(--surface-form-preview);
}

.sg-page-text-layouts .sg-main-heading,
.sg-page-text-layouts .sg-preview-label {
  color: inherit;
}

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

.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__two-column--stacked-mobile {
  width: 100%;
  min-width: 0;
}

.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__three-column-distributed > .sg-body {
  margin: 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__two-column--stacked-mobile,
  .sg-text-layout-pattern__three-column-distributed {
    width: 100%;
  }

  .sg-text-layout-pattern__two-column--stacked-mobile {
    grid-template-columns: 1fr;
    row-gap: var(--layout-text-layout-column-gap);
  }
}