.tone-voice {
  display: inline-flex;
  padding: 40px 112px;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  background-color: #ffffff;
  width: 100%;
}

.tone-voice .tone-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

.tone-voice .tone-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.tone-voice .tone-row > .label {
  flex: 0 0 145px;
}

.tone-voice .tone-row > .label.right-label {
  text-align: right;
}

.tone-voice .tone-bar-wrapper {
  flex: 1;
}

.tone-voice .tone-bar {
  position: relative;
  height: 20px;
  background-color: #dcefff;
  border-left: 2px solid #0c8ce9;
  border-right: 2px solid #0c8ce9;
  display: flex;
  align-items: center;
}

.tone-voice .tone-segment {
  height: 100%;
  border-left: 2px solid #0c8ce9;
  position: absolute;
}

.tone-voice .tone-segment:nth-child(1) {
  left: 20%;
}

.tone-voice .tone-segment:nth-child(2) {
  left: 40%;
}

.tone-voice .tone-segment:nth-child(3) {
  left: 60%;
}

.tone-voice .tone-segment:nth-child(4) {
  left: 80%;
}

.tone-voice .tone-marker {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  width: 20px;
  height: 20px;
  background-color: #8000ff;
  border-radius: 50%;
}

.tone-voice .marker-pos-3 {
  left: 60%;
}

.tone-voice .marker-pos-2 {
  left: 40%;
}

.tone-voice .tone-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
}

.tone-voice .responsive-labels {
  display: none;
}

@container (max-width: 1440px) {
  .tone-voice {
    padding: 40px 32px;
  }
}

@container (max-width: 1215px) {
  .tone-voice {
    padding: 40px 32px;
  }

  .tone-voice .tone-row {
    width: 100%;
  }

  .tone-voice .tone-bar {
    height: 16px;
  }
}

@container (max-width: 767px) {
  .tone-voice .tone-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .tone-voice .tone-bar-wrapper {
    width: 100%;
  }

  .tone-labels {
    padding-top: 8px;
  }

  .tone-voice .tone-row > .label {
    display: none;
  }

  .tone-voice .tone-row .responsive-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}

@container (max-width: 420px) {
  .tone-voice {
    padding: 40px 16px;
  }
}

.tone-row {
  width: 8ch; /* roughly 8 characters */
  overflow-wrap: break-word; /* break long words */
  word-break: break-word; /* for older browsers */
  white-space: normal;
}