.fullWidthChart {
  display: inline-block;
  width: 100%;
}

.halfWidthChart {
  display: inline-block;
  width: 50%;
}

.quarterWidthChart {
  display: inline-block;
  width: 25%;
}

.chartContainer {
  margin: 5px;
  padding: 15px 25px;
  height: 300px;
  border-radius: 10px;
  background-color: var(--chartBackgroundColor);
}

.statContainer {
  margin: 5px;
  padding: 15px 25px;
  height: 150px;
  border-radius: 10px;
  background-color: var(--chartBackgroundColor);
}

.statTitle {
  font-weight: bold;
  font-size: 14px;
}

.stat {
  font-weight: bold;
  font-size: 60px;
}

@media only screen and (max-width: $breakpointSmall) {
  .halfWidthChart {
    display: inline-block;
    width: 100%;
  }

  .quarterWidthChart {
    display: inline-block;
    width: 100%;
  }
}