.l6Progress {
  border-radius: var(--Corner-Radius-md);
  border: 1px solid var(--Border-Divider-Default);
  background: var(--Surface-Primary-Default);
  padding: var(--Space-x3);
  display: flex;
  flex-direction: column;
  gap: var(--Space-x2);
}

.header {
  display: flex;
  flex-direction: column;
  gap: var(--Space-x05);
}

.title,
.since {
  color: var(--Text-Secondary);
}

.sinceDate {
  display: flex;
  gap: var(--Space-x05);
}

.progressSection {
  display: grid;
  grid-template-columns: min-content 1fr auto;
  gap: var(--Space-x05);
  align-items: center;
  grid-template-areas:
    "startLabel  startLabel  endLabel  endLabel"
    "startValue  bar bar  endValue";
}

.startLabelText {
  grid-area: startLabel;
  color: var(--Text-Secondary);
}

.endLabelText {
  grid-area: endLabel;
  text-align: right;
  color: var(--Text-Secondary);
}

.startValue {
  grid-area: startValue;
  color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
  padding-right: var(--Space-x2);
}

.progressBar {
  grid-area: bar;
}

.endValue {
  grid-area: endValue;
  text-align: right;
  color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
  padding-left: var(--Space-x2);
}

.startDivider,
.endDivider {
  display: none;
}

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

  .header {
    flex-direction: row;
    align-items: center;
    gap: var(--Space-x1);
  }

  .progressSection {
    grid-template-columns: auto auto auto 1fr auto auto auto;
    gap: var(--Space-x2);
    grid-template-areas: "startLabel startDiv startValue bar endValue endDiv endLabel";
  }

  .startDivider {
    grid-area: startDiv;
    display: block;
  }

  .endDivider {
    grid-area: endDiv;
    display: block;
  }

  .endValue .endLabelText {
    text-align: left;
  }
}