.budget-highlight {
  display: grid;

  grid-template-columns: min-content min-content 1fr;
  grid-template-rows: min-content 1fr;
  grid-template-areas:
    "ic nb sb"
    "ic tx tx";

  font-family: sans-serif;
  color: #2c2c2c;
  margin: 16px 12px;
  line-height: normal;

  max-width: 425px;
}

.budget-highlight .icon-container {
  grid-area: ic;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 16px 0 8px;
}

.budget-highlight > div {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.budget-highlight > div.text {
  display: block;
}

.budget-highlight span.page {
  margin-left: 1em;
  font-size: 0.75em;
  font-style: italic;
  white-space: nowrap;

  display: none;
}

.budget-highlight > div.text a {
  font-family: "ÐÇ¿Õ´«Ã½Sans-Black", sans-serif;
  font-size: 12px;
  color: #222;
  margin-left: 1em;
  white-space: nowrap;
}

.icon-outer {
  --size: 36px;
  width: var(--size);
  height: var(--size);
  border-radius: var(--size);

  background-color: #2c2c2c;
}

.budget-h2 .icon-outer {
  --size: 28px;
}

.budget-highlight .icon,
.budget-h2 .icon {
  width: var(--size);
  height: var(--size);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: 50% 50%;
  filter: invert(1);
}

.budget-h2 {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 4px;
  margin-top: 24px;
}

.icon.housing {
  background-image: url("/content/dam/ctvnews/en/images/national/2021/house%20icon%20budget%202024.svg");
  background-size: 81%;
  background-position: 60% 45%;
}
.icon.pharmacare {
  background-image: url("/content/dam/ctvnews/en/images/national/2021/pill%20health%20icon%20budget%202024.svg");
  background-size: 70%;
  background-position: 55% 50%;
}
.icon.military {
  background-image: url("/content/dam/ctvnews/en/images/national/2021/military%20icon%20budget%202024.svg");
  background-size: 65%;
  background-position: 53% 70%;
}
.icon.tech {
  background-image: url("/content/dam/ctvnews/en/images/national/2021/AI%20computing%20budget%202024.svg");
  background-size: 70%;
  background-position: 53% 50%;
}
.icon.education {
  background-image: url("/content/dam/ctvnews/en/images/national/2021/education%20icon%20budget%202024.svg");
  background-size: 70%;
  background-position: 53% 50%;
}
.icon.health {
  background-image: url("/content/dam/ctvnews/en/images/national/2021/health%20icon%20budget%202024.svg");
  background-size: 68%;
  background-position: 53% 52%;
}
.icon.childcare {
  background-image: url("/content/dam/ctvnews/en/images/national/2021/child%20care%20icon%20budget%202024.svg");
  background-size: 72%;
  background-position: 53% 63%;
}
.icon.spending {
  background-image: url("/content/dam/ctvnews/en/images/national/2021/dollar%20icon%20budget%202024.svg");
  background-size: 82%;
  background-position: 53% 50%;
}

.budget-highlight .number {
  grid-area: nb;
  /* letter-spacing: -0.2px; */

  font-family: "ÐÇ¿Õ´«Ã½Sans-Black", sans-serif;
  font-size: 32px;
  white-space: nowrap;
}

.budget-highlight .subtext {
  grid-area: sb;

  font-family: "ÐÇ¿Õ´«Ã½Sans-Regular", sans-serif;
  font-size: 13px;
  margin-left: 5px;
  margin-bottom: 5px;

  font-style: italic;
}

.budget-highlight .text {
  grid-area: tx;

  font-size: 16px;
  margin-top: 1px;
}

.budget-highlight-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}