:root {
  --ans-0: #ff7a1a;
  --ans-1: #a58bff;
  --ans-2: #2fc7b3;
  --ans-3: #ff6b9a;
  --ans-ink: #150e0a;
}

.answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.ans {
  border: 0;
  color: var(--ans-ink);
  font-weight: 800;
  transition: opacity 300ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 300ms var(--ease-out);
}

.ans[data-i='0'] {
  background: var(--ans-0);
}

.ans[data-i='1'] {
  background: var(--ans-1);
}

.ans[data-i='2'] {
  background: var(--ans-2);
}

.ans[data-i='3'] {
  background: var(--ans-3);
}

.ans-shape {
  flex: none;
  fill: currentColor;
}

.ans-text {
  overflow-wrap: anywhere;
}

.ans-count {
  display: none;
  font-variant-numeric: tabular-nums;
}