.article-question {
  margin-bottom: 1em;
  width: 100%; }
  .article-question__title {
    font-size: 1em;
    line-height: 1.5em;
    font-weight: normal; }
  .article-question__rating {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    margin-top: 0.625em; }
  .article-question__rating-circle input {
    display: none; }
  .article-question__rating-circle label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    font-size: 1.5em;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    cursor: pointer; }
  .article-question__rating-circle:nth-child(1) label, .article-question__rating-circle:nth-child(2) label {
    color: #EB5757;
    border-color: #EB5757; }
  .article-question__rating-circle:nth-child(1) input:checked ~ label, .article-question__rating-circle:nth-child(2) input:checked ~ label {
    background: #EB5757;
    color: white; }
  .article-question__rating-circle:nth-child(3) label, .article-question__rating-circle:nth-child(4) label {
    color: #F2994A;
    border-color: #F2994A; }
  .article-question__rating-circle:nth-child(3) input:checked ~ label, .article-question__rating-circle:nth-child(4) input:checked ~ label {
    background: #F2994A;
    color: white; }
  .article-question__rating-circle:nth-child(5) label, .article-question__rating-circle:nth-child(6) label, .article-question__rating-circle:nth-child(7) label {
    color: #F2C94C;
    border-color: #F2C94C; }
  .article-question__rating-circle:nth-child(5) input:checked ~ label, .article-question__rating-circle:nth-child(6) input:checked ~ label, .article-question__rating-circle:nth-child(7) input:checked ~ label {
    background: #F2C94C;
    color: white; }
  .article-question__rating-circle:nth-child(8) label, .article-question__rating-circle:nth-child(9) label {
    color: #6FCF97;
    border-color: #6FCF97; }
  .article-question__rating-circle:nth-child(8) input:checked ~ label, .article-question__rating-circle:nth-child(9) input:checked ~ label {
    background: #6FCF97;
    color: white; }
  .article-question__rating-circle:nth-child(10) label, .article-question__rating-circle:nth-child(11) label {
    color: #27AE60;
    border-color: #27AE60; }
  .article-question__rating-circle:nth-child(10) input:checked ~ label, .article-question__rating-circle:nth-child(11) input:checked ~ label {
    background: #27AE60;
    color: white; }
  .article-question__open-answer {
    width: 100%;
    padding: .25em 0 .75em 0; }
    .article-question__open-answer input {
      width: 100%;
      height: 2.8125em;
      border: 1px solid #D6D6D6;
      border-radius: .25em;
      padding: 0.625em 1em;
      font-size: 1em;
      line-height: 1.5em; }
  .article-question__closed-answer {
    display: flex;
    flex-direction: column;
    margin-top: .75em;
    gap: .5em; }
    .article-question__closed-answer label {
      display: flex;
      align-items: flex-start;
      line-height: 1.5em;
      gap: 0.875em; }
    .article-question__closed-answer input {
      appearance: none;
      -webkit-appearance: none;
      width: 1.125em;
      min-width: 1.125em;
      height: 1.125em;
      min-height: 1.125em;
      border: 1px solid #3D7E79;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1em;
      margin: 0; }
      .article-question__closed-answer input:checked::before {
        content: '';
        width: 100%;
        height: 100%;
        background: #3D7E79; }
    .article-question__closed-answer--single-choice input {
      border-radius: 50%; }
      .article-question__closed-answer--single-choice input:checked::before {
        border-radius: 50%; }

@media (max-width: 540px) {
  .article-question__rating {
    max-width: 200px; } }