.dashboard {
    display: flex;
    gap: var(--spacing-md);
    flex-direction: column;

    max-width: calc(var(--spacing-xl) * 10);
    margin: var(--spacing-xl) auto;

    font-size: var(--font-size-sm);
    line-height: 0.9;
}

.card {
    display: grid;
    column-gap: var(--spacing-xs);
    grid-template-columns: var(--spacing-xl) 2fr;
    align-items: center;
    cursor: pointer;
}

.card svg {
    width: 100%;
    align-self: center;

    grid-column: 1 / 2;
    grid-row: 1 / 3;
    justify-self: right;
    aspect-ratio: 1;
    opacity: 0.8;

    display: grid;
    place-items: center;
}

.sunset svg {
    rotate: 180deg;
}

.card__value {
    grid-column: 2 / 3;
    font-size: var(--font-size-md);
    font-weight: bold;
    line-height: 1;
}

.card__text {
    grid-column: 2 / 3;
    line-height: 1;
}

.card:first-of-type {
    line-height: 0.9 !important;
    width: fit-content;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
    grid-template-columns: 1fr 2.5fr;
}

.card:first-of-type .card__value {
    font-size: var(--font-size-xxl);
}

.card:first-of-type .card__text {
    font-size: var(--font-size-md);
}
