/*
 * Use CSS variables for each grade. Allows finer control of element styling;
 */
.grade--a {
  --color: #21578A;
}

.grade--b {
  --color: #4C8C40;
}

.grade--c {
  --color: #F5B21E;
}

.grade--d {
  --color: #E87524;
}

.grade--f {
  --color: #D01F30;
}

.grade--none {
  --color: #EEE;
}

.grade--f1 {
  --color: rgb(216, 62, 72);
}

.grade--f2 {
  --color: rgb(228, 125, 134);
}

.grade--f3 {
  --color: rgb(232, 144, 152);
}

.grade--f4 {
  --color: rgb(239, 181, 186);
}

.grade--f5 {
  --color: rgb(248, 224, 225);
  --text: #1C1C1B;
}

.wp-block-recent-scores__inner {
  gap: 17px;
}
.wp-block-recent-scores h4 {
  margin-bottom: 0;
  flex-grow: 1;
  font-size: 17px;
}
.wp-block-recent-scores .recent-score {
  width: 100%;
  max-width: calc(25% - 13px);
}
@media (max-width: 1200px) {
  .wp-block-recent-scores .recent-score {
    max-width: 235px;
  }
}
@media (max-width: 640px) {
  .wp-block-recent-scores .recent-score {
    max-width: 100%;
  }
}
.wp-block-recent-scores .recent-score .score-card {
  transition: color 0.25s linear, background-color 0.25s linear;
  background: #A4A4A4;
  color: #D9D9D9;
  width: 100%;
  padding: 28px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 12px 0;
}
.wp-block-recent-scores .recent-score .score-card.grade--a {
  background: #21578A;
  fill: #21578A;
  color: #fff;
}
.wp-block-recent-scores .recent-score .score-card.grade--b {
  background: #4C8C40;
  fill: #4C8C40;
  color: #fff;
}
.wp-block-recent-scores .recent-score .score-card.grade--c {
  background: #F5B21E;
  fill: #F5B21E;
  color: #fff;
}
.wp-block-recent-scores .recent-score .score-card.grade--d {
  background: #E87524;
  fill: #E87524;
  color: #fff;
}
.wp-block-recent-scores .recent-score .score-card.grade--f {
  background: #D01F30;
  fill: #D01F30;
  color: #fff;
}
.wp-block-recent-scores .recent-score .score-card.grade--none {
  background: #EEE;
  fill: #EEE;
  color: #1C1C1B;
}
.wp-block-recent-scores .recent-score .score-card.grade--f1 {
  background: rgb(216, 62, 72);
  fill: rgb(216, 62, 72);
  color: #fff;
}
.wp-block-recent-scores .recent-score .score-card.grade--f2 {
  background: rgb(228, 125, 134);
  fill: rgb(228, 125, 134);
  color: #fff;
}
.wp-block-recent-scores .recent-score .score-card.grade--f3 {
  background: rgb(232, 144, 152);
  fill: rgb(232, 144, 152);
  color: #1C1C1B;
}
.wp-block-recent-scores .recent-score .score-card.grade--f4 {
  background: rgb(239, 181, 186);
  fill: rgb(239, 181, 186);
  color: #1C1C1B;
}
.wp-block-recent-scores .recent-score .score-card.grade--f5 {
  background: rgb(248, 224, 225);
  fill: rgb(248, 224, 225);
  color: #1C1C1B;
}
.wp-block-recent-scores .recent-score .score-card__score {
  font-size: em(30px);
  font-weight: 600;
  font-family: "Barlow", sans-serif;
  color: currentColor;
}
.wp-block-recent-scores .recent-score .score-card__year {
  font-size: em(12px);
  color: currentColor;
  font-weight: 600;
  font-family: "Barlow", sans-serif;
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.wp-block-recent-scores .select-wrap {
  width: calc(100% + 32px);
}
.wp-block-recent-scores .view-all {
  margin-top: 10px;
}