section:not(:last-child) {
    margin-bottom:3rem
}
#converter>div {
    display:flex;
    justify-content:center;
    gap:4px;
    @media all and (max-width:899px) {
        flex-direction:column;
    }
    @media all and (min-width:900px) {
        flex-direction:row;
    }
    .metric {
        width:100%;
        text-align:center;
        background-color:#f6f6f6;
        padding:10px;
        .label {
            font-size:1.2rem;
        }
        .value {
            display:flex;
            justify-content:space-evenly;
            align-items:center;
            align-content:center;
            span {
                padding: 5px 10px;
                width: 70px;
                display: inline-block;
                font-size:1.6rem;
                color: var(--color-primary);
            }
            button {
                font-size:.9em;
                font-family:arial;
                background:none;
                padding:5px 10px;
                border:none;
                border-radius:6px;
                font-weight: normal;
                background-color: white;
                color: var(--color-primary);
            }
            button:active {
                background:#e6e6e6;
                color:var(--black);
            }
            @media(hover:hover) and (pointer:fine) {
                button:hover {
                    color:var(--black);
                    border-color:white;
                }
            }
        }
        .unit {
            font-size:.8rem;
            font: var(--s);
        }
        @media all and (max-width:899px) {
            flex-direction:column;
            &:first-child {
                border-top-left-radius: 16px;
                border-top-right-radius: 16px;
            }
            &:last-child {
                border-bottom-left-radius: 16px;
                border-bottom-right-radius: 16px;
            }
        }
        @media all and (min-width:900px) {
            flex-direction:row;
            &:first-child {
                border-top-left-radius: 16px;
                border-bottom-left-radius: 16px;
            }
            &:last-child {
                border-top-right-radius: 16px;
                border-bottom-right-radius: 16px;
            }
        }
    }
}

td,
th {
    width:50%
}
td:last-child {
    font-family:monospace, monospace-ui
}