.thoughts {
  display: flex;
  flex-direction: column;
  max-width: 49ch;
}

.thoughts .thoughts__container {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-small);
  gap: calc(var(--line-height) * 2);
  letter-spacing: normal;
  margin-bottom: 3.7em;
  margin-top: 3.7em;
}

.thoughts .thoughts__thought {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.thoughts .thoughts__thought h3 {
  font-size: var(--font-size-xxx-large);
  font-weight: 700;
  line-height: 1.2;
}

.thoughts .thoughts__thought a.button {
  margin-top: 0.35em;
}

.thoughts .signup {
  margin-bottom: 3.7em;
  order: 1;
}

@media(min-width: 64em) and (hover: hover) and (pointer: fine) {

  .thoughts {
    margin-left: 2.8ch;
    margin-right: 2.8ch;
    max-width: 39ch;
  }

  .thoughts .signup {
    margin-bottom: 0;
    margin-top: 3.7em;
    order: 0;
  }

}