.project-progress__card {
    --font-size: var(--root-font-size); /* Reset: use REM */
    --order: 4;
}

.project-progress__card .project-progress__cell-header {
    --color: var(--root-color-text);
    --font-family: var(--root-heading-3-family);
    --font-size: 0.889em;
    --font-style: var(--root-heading-3-style);
    --font-weight: var(--root-font-weight--normal);
    --line-height: var(--root-heading-3-line-height);
}

.project-progress__card .project-progress__information,
.project-progress__card .project-progress__percentage,
.project-progress__card .project-progress__explanation {
    --color: var(--root-color-text);
    --font-family: var(--root-font-family--primary);
    --font-size: 0.889em;
    --font-style: normal;
    --font-weight: var(--root-font-weight--normal);
    --line-height: var(--root-line-height);
}

.project-progress__card {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
}

.project-progress__card .project-progress__cell-header {
    margin-top: 0
}

.project-progress__card .project-progress__indicator {
    flex-grow: 1;
}

.project-progress__card .project-progress__bar-container {
    display: flex;
    align-items: center;
}

.project-progress__card .project-progress__bar {
    flex-grow: 1;
}

.project-progress__card .project-progress__percentage {
    line-height: 0;
    margin-top: 0;
    margin-left: 0.5rem;
}

@media (min-width: 30em) and (max-width: 39.999rem) {
    .project-progress__card {
        flex-direction: column;
    }
}

.project-progress__card {
    font-size: var(--font-size, 1rem); /* Reset, use REM */
    order: var(--order, 4);
}