.committed-satisfaction .pane-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  column-gap: 4rem;
  justify-content: space-around;
  align-items: center;
}

.committed-satisfaction .pane-content > * {
  max-width: 40rem;
}

.section-header-column {
  flex: 1;
  container-type: normal;
}

.section-header-column div {
  text-align: center;
  text-wrap: balance;
  margin: auto;
  line-height: normal;
  margin: .9em 0 1.3em;
  font-size: clamp(1em, 3cqi, 1.5em);
}

.section-header-column h3 {
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  font-weight: 800;
  line-height: 1;
  font-size: clamp(1em, 10cqi, 4.5em);
  margin: 0;
}

.committed-satisfaction ul.section-text-column {
  --_border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: var(--_border);
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  min-width: 40%;
  container-type: normal;
}
.section-text-column li div {
  display: flex;
  flex: 1;
  row-gap: .5em;
  flex-direction: column;
}
.section-text-column li {
  flex-grow: 1;
  padding: .75em 0;
  border-top: var(--_border);;
  display: flex;
  gap: 1em;
  align-items: center;
}

.section-text-column .forall-icons-icon {
  font-size: 200%;
  color: var(--color-accent);
}
.section-text-column span {
  font-weight: bold;
  display: block;
  line-height: normal;
  flex: 1;
  min-width: 6em;
  font-size: clamp(100%, 2cqi, 1.5em);
}
.section-text-column small {
  display: block;
  flex: 4;
  min-width: 66%;
  font-size: clamp(95%, 2cqi, 1.125em);
}

.committed-satisfaction .section-link {
  flex-basis: 100%;
  --border-width: 2px;
  --btn-font-weight: 600;
  max-width: unset;
  font-size: 1em;
}

.committed-satisfaction .gradiant-border {
  justify-content: space-between;
}

@media (width > 704px) {
  .committed-satisfaction .section-link > a {
    max-width: fit-content;
    margin: auto;
  }
}



/* @todo: consider moving this to the theme */
.brand-gradient-scroll {
  background: var(--brandGradientColorful);
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: brand-gradient-scroll linear;
  animation-timeline: view();
}

@keyframes brand-gradient-scroll {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
