.spr-text-two-columns {
  --text-two-columns-background: var(--color-white);
  --text-two-columns-color-background: var(--color-gray-20);
  --text-two-columns-color-text-color: var(--color-black);

  background-color: var(--color-gray-20);
  font-size: var(--text-two-columns-text-font-size);
  padding-block: var(--padding-component);
}

.spr-text-two-columns:has(+ section[class*="--is-merged"]:not(.has-color-right, .has-color-left)) {
  padding-block-end: 0;
}

.spr-text-two-columns.spr-text-two-columns--is-merged:not(.has-color-right, .has-color-left) {
  padding-block-start: 0;
}

.spr-text-two-columns--dark {
  --text-two-columns-background: var(--color-gray-20);
  --text-two-columns-color-background: var(--color-white);
  --text-two-columns-color-text-color: var(--color-black);
  --text-two-columns-color: #fff;
  --text-two-columns-color-bg-color: var(--text-two-columns-color-bg-color-on-dark);

  background-color: var(--color-white);
}

.spr-text-two-columns.spr-text-two-columns--dark.has-color-right,
.spr-text-two-columns.spr-text-two-columns--dark.has-color-left {
  --text-two-columns-color: white;

  background-color: var(--color-white);
}

.spr-text-two-columns__container {
  display: grid;
  grid-template-columns: repeat(var(--text-two-columns-text-grid-columns), 1fr);
}

.spr-text-two-columns__content {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / span 4;
  padding-block-start: var(--padding-component-inline);
  background-color: var(--text-two-columns-background);

  @media screen and (min-width: 48rem) {
    grid-column: 1 / span 12;
  }
}

.spr-text-two-columns.has-color-right .spr-text-two-columns__content,
.spr-text-two-columns.has-color-left .spr-text-two-columns__content {
  padding-block-start: unset;
  background-color: transparent;

  @media (max-width: 991px) {
    padding-block: 0;
    padding-inline: 0;
  }
}

.spr-text-two-columns__header {
  grid-column: 1 / span 4;
  padding-inline: var(--padding-component-inline);
  margin-block-end: var(--text-two-columns-text-gap-large);

  @media screen and (min-width: 48rem) {
    grid-column: 1 / span 12;
  }
}

.spr-text-two-columns.has-color-right .spr-text-two-columns__header,
.spr-text-two-columns.has-color-left .spr-text-two-columns__header {
  margin-block-end: var(--text-two-columns-text-gap);
  padding-inline: unset;
}

.spr-text-two-columns__cols {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / span 4;

  @media screen and (min-width: 48rem) {
    grid-column: 1 / span 12;
  }
}

.spr-text-two-columns.has-color-right .spr-text-two-columns__cols,
.spr-text-two-columns.has-color-left .spr-text-two-columns__cols {
  grid-column: 1 / span 12;
  background-color: var(--text-two-columns-background);
}

.spr-text-two-columns__col {
  inline-size: 100%;
  color: var(--text-two-columns-color);
  padding-inline: 1.5rem;
}

.spr-text-two-columns__col:first-child {
  grid-column: 1 / span 4;
  padding-inline: var(--padding-component-inline);
  padding-block-end: var(--padding-component-inline);

  @media screen and (min-width: 48rem) {
    grid-column: 1 / span 6;
  }
}

.spr-text-two-columns__col:first-child:has(.spr-text-two-columns__buttons:empty):has(.spr-text-two-columns__text .spr-rich-text:empty) {
  display: none;
}

.spr-text-two-columns__col:first-child:has(.spr-text-two-columns__buttons:empty):has(.spr-text-two-columns__text .spr-rich-text:empty) + .spr-text-two-columns__col {
  grid-column: 1 / span 4;

  @media screen and (min-width: 48rem) {
    grid-column: 1 / span 6;
  }
}

.spr-text-two-columns__col:last-child {
  grid-column: 1 / span 4;
  padding-inline: var(--padding-component-inline);
  padding-block-end: var(--padding-component-inline);

  @media screen and (min-width: 48rem) {
    grid-column: 7 / span 6;
  }
}

.spr-text-two-columns.has-color-right .spr-text-two-columns__col,
.spr-text-two-columns.has-color-left .spr-text-two-columns__col {
  padding: var(--padding-component-inline);
}

.spr-text-two-columns.has-color-right .spr-text-two-columns__col:first-child {
  grid-column: 1 / span 4;

  @media screen and (min-width: 48rem) {
    grid-column: 1 / span 6;
  }
}

.spr-text-two-columns.has-color-left .spr-text-two-columns__col:first-child {
  grid-column: 1 / span 4;
  color: var(--department-text-color, var(--text-two-columns-color-text-color));
  background-color: var(--department-color-scheme, var(--text-two-columns-color-bg-color));

  h3.spr-heading {
    color: var(--department-text-color, var(--color-text));
  }

  @media screen and (min-width: 48rem) {
    grid-column: 1 / span 6;
  }
}

.spr-text-two-columns.has-color-right .spr-text-two-columns__col:last-child {
  grid-column: 1 / span 4;
  color: var(--department-text-color, var(--text-two-columns-color-text-color));
  background-color: var(--department-color-scheme, var(--text-two-columns-color-bg-color));

  h3.spr-heading {
    color: var(--department-text-color, var(--color-text));
  }

  @media screen and (min-width: 48rem) {
    grid-column: 7 / span 6;
  }
}

.spr-text-two-columns--small {
  grid-column: 1 / span 12;

  .spr-text-two-columns__content {
    @media (min-width: 62rem) {
      grid-column: 3 / span 8;
    }
  }
}

.spr-text-two-columns--medium {
  grid-column: 1 / span 12;

  .spr-text-two-columns__content {
    @media (min-width: 62rem) {
      grid-column: 2 / span 10;
    }
  }

  @media (min-width: 1280px) {
    --text-two-columns-text-grid-gap: 10rem;
  }
}

.spr-text-two-columns--large {
  grid-column: 1 / span 12;

  @media (min-width: 1280px) {
    --text-two-columns-text-grid-gap: 10rem;
  }
}

.spr-text-two-columns__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block: 1rem 0;
}