.hero-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
}
.hero-bg > .img {
  --background: '';
  width: 100%;
  height: 100%;
  background-color: #cfeffc;
  background-image: var(--background);
  background-repeat: repeat-x;
  background-position: bottom left;
}

.answer-container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.answer-container .answer-title {
  font-size: 3rem;
  overflow-wrap: anywhere;
}
.answer-container .answer-content {
  font-size: 1.6rem;
}

.text-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

hr {
  border: none;
  border-top: 1px solid #bbb;
}

.feedback > .feedback-state {
  display: none;
  flex-direction: column;
  gap: 1rem;
}
.feedback[data-state='question'] > [data-state='question'],
.feedback[data-state='yes'] > [data-state='yes'],
.feedback[data-state='no'] > [data-state='no'] {
  display: flex;
}
.feedback .feedback-question {
  font-size: 1.3rem;
  font-weight: bold;
}
.feedback .feedback-selected {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
}
.feedback .feedback-selected svg {
  margin-left: 1rem;
  margin-right: 0.5rem;
}
.feedback .feedback-response {
  font-size: 1.6rem;
}