.Surface-Brand-Primary-1-OnSurface-Default {
  background: var(--Surface-Brand-Primary-1-OnSurface-Default);
}

.Surface-Brand-Primary-1-Default {
  background: var(--Surface-Brand-Primary-1-Default);
}

.Surface-Brand-Primary-1-OnSurface-Default .title {
  color: var(--Text-Brand-OnPrimary-3-Heading);
}

.Surface-Brand-Primary-1-OnSurface-Default .date {
  color: var(--Text-Brand-OnPrimary-2-Accent);
}

.Surface-Brand-Primary-1-Default .title,
.Surface-Brand-Primary-1-Default .date {
  color: var(--Text-Brand-OnPrimary-1-Heading);
}

.levelProgressCard {
  border-radius: var(--Corner-Radius-lg);
  padding: var(--Space-x3) var(--Space-x2);
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--Space-x3);
}

.progressHeader {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--Space-x05);
  align-items: start;
}

.title {
  grid-column: 1;
  grid-row: 1;
}

.date {
  grid-column: 1;
  grid-row: 2;
}

.infoButton {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: start;
}

.innerCard {
  background: var(--Surface-Primary-Default);
  border-radius: var(--Corner-Radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--Space-x2);
  padding: var(--Space-x3) 0;
}

@media screen and (min-width: 1367px) {
  .levelProgressCard {
    padding: var(--Space-x3) var(--Space-x4);
  }
}