.script-explanation {
  color: var(--color-white);
}

.script-explanation h2, .script-explanation h3 {
  font-size: var(--text-2xl);
  font-weight: bold;
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}

.script-explanation ul {
  list-style-type: disc;
  padding-left: calc(var(--spacing) * 6);
}

.script-explanation li {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  padding-left: calc(var(--spacing) * 2);
  padding-bottom: calc(var(--spacing) * 2);
}

.script-check-understanding {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  padding: calc(var(--spacing) * 4);
}

.script-check-understanding h2, .script-check-understanding h3 {
  width: 100%;
  font-size: var(--text-2xl);
  font-weight: bold;
  text-align: center;
  color: var(--color-white);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  margin-bottom: calc(var(--spacing) * 8);
}

.script-check-understanding .option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 4);
  border-radius: .50rem;
  cursor: pointer;
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-200);
    }
  }
}

.script-check-understanding .option p {
  text-align: center;
}

.script-quiz-true-false {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  padding: calc(var(--spacing) * 4);
}

.script-quiz-true-false h2, .script-quiz-true-false h3 {
  width: 100%;
  font-size: var(--text-2xl);
  font-weight: bold;
  text-align: center;
  color: var(--color-white);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  margin-bottom: calc(var(--spacing) * 8);
}

.script-quiz-true-false .option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  padding: calc(var(--spacing) * 4);
  border-radius: .50rem;
  cursor: pointer;
}

.script-quiz-true-false .option p {
  text-align: center;
}

.script-ending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacing) * 4);
}

.script-ending .options {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-items: stretch;
  gap: calc(var(--spacing) * 4);
}

.script-ending h2, .script-ending h3 {
  width: 100%;
  font-size: var(--text-2xl);
  text-align: center;
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  margin-bottom: calc(var(--spacing) * 8);
}

.script-ending .item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  width: 30%;
  min-width: 9rem;
  padding: calc(var(--spacing) * 4);
  border-radius: 1.5rem;
  cursor: pointer;
}

.script-ending .item h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: calc(var(--spacing) * 4);
}

.script-ending .item p {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-white);
  margin-bottom: calc(var(--spacing) * 2);
}

.script-ending .item .icon {
  color: var(--color-white);
}

.script-ending .item .icon svg {
  height: 2.5rem;
}

.script-ending .item.test {
  background-color: var(--color-aqua-500);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-aqua-700);
    }
  }
}

.script-ending .item.chat {
  background-color: var(--color-slate-600);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-slate-700);
    }
  }
}