estimating-trends/src/scss/modules/_questions.scss

.question {
  @include spacing;

  &__fakenews {
    @include spacing(b 0);
  }

  &__manipula {
    min-height: 135px;
  }

  &__title {
    @include font-size(h4);
    @include spacing;
    text-align: center;
  }

  &__intro {
    @include font-size(small);
    @include spacing;
    text-align: center;
  }

  &__instruction {
    @include spacing(b .25);
    font-weight: 400;
    text-align: center;
  }

  &__hint {
    @include font-size(small);
    text-align: center;
  }

  &__options {
    @include center;
    display: flex;
    justify-content: center;

    &__item {
      @include spacing-inner(h .5);

      .question__ofwhat & {
        width: 25%;
      }

      .question__compound & {
        @include spacing-inner(h 1);
      }

      .question__fakenews & {
        @include spacing-inner(l 0);
      }
    }
  }

  &__source {
    @include font-size(small);
    text-align: center;
  }

  &__message {
    @include font-size(small);
    @include color(main);
    max-width: 842px; // same as svg
    text-align: right;
    height: 21px;

    > div {
      &[aria-hidden='true'] {
        display: none;
      }
    }
  }

  &__ofwhat--no-mb {
    @include spacing(b 0);

    p {
      @include spacing(b 0);
    }
  }

  &__compound__setting {
    p {
      &:nth-of-type(1),
      &:nth-last-of-type(1) {
        @include spacing(b 2);
      }
    }
  }
}