.metric_box {
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: var(--pico-color-slate-850);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .abbr {
        text-transform: uppercase;
        text-decoration: none;
        border: none;
    }

    .value {
        font-size: 2rem;
        font-weight: bold;
        color: var(--pico-color-sand-100);
    }

    .delta {
        font-weight: lighter;
    }

    .delta.better {
        color: var(--pico-color-green-400);
    }

    .delta.worse {
        color: var(--pico-color-red-400);
    }

}