.root {
  padding: var(--extra-large-padding);
  border-bottom: 1px solid var(--dark-gray);
}

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  align-items: center;
}

.title {
  flex: 1 1 auto;
  margin-right: var(--large-margin);
}

.pointsAndPercentage {
  /* large enough basis to break without getting too close */
  flex: 3 1 15rem;

  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
}

.percentageSection {
  flex: 1 1 auto;
}

.pointsSection {
  flex: 2 1 auto;
}

.title h2 {
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-xxl);
}

.percentage {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.points {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.scoreSectionLabel {
  font-size: var(--font-size-sm);
  color: var(--even-darker-gray);
}

.pointsOutOfText {
  font-size: var(--font-size-sm);
  color: var(--even-darker-gray);
}

.alertWrapper {
  width: 100%;
  margin: var(--large-margin) 0;
}