aex/style/_inventory.scss

.inventories {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    height: 100%;

    > hr {
        width: 2px;
        height: 100%;
        background: crimson;
        opacity: 0.448;
    }
}

section.inventory {
    width: 50%;
    display: flex;
    flex-direction: column;

    &:first-of-type {
        h3 {
            text-align: right;
        }
    }
    &:last-of-type {

    }

    h3 {
        text-transform: lowercase;
        font-size: 1.3em;
        margin: 0 20px 10px;
        font-weight: 900;
        &::first-letter {
            text-decoration: underline crimson;
        }
    }

    .balance {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        > div {
            width: 28%;
            height: 35px;
            font-weight: 300;
            display: flex;
            gap: 7px;
            align-items: center;
            justify-content: space-between;
        }

        .platinum, .gold, .electrum, .silver, .copper {
            position: relative;
            &::before {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                width: 15px;
                height: 15px;
                content: "";
                display: block;
                background-position: center center;
                background-size: cover;
            }
        }

        .platinum::before {
            background-image: url("/assets/platinum.webp");
        }
        .gold::before {
            background-image: url("/assets/gold.webp");
        }
        .electrum::before {
            background-image: url("/assets/electrum.webp");
        }
        .silver::before {
            background-image: url("/assets/silver.webp");
        }
        .copper::before {
            background-image: url("/assets/copper.webp");
        }
    }

    &-personal {
        .item-swap {
            &::before {
                content: "→";
            }
            grid-column: 7/8;
        }
    }
    &-common {
        .item-swap {
            &::before {
                content: "←";
            }
            grid-column: 1/2;
        }
    }

    .items {
        margin-top: 20px;
        .item {
            &:nth-child(2n) {
                background: rgba(white, 0.05);
            }
            font-weight: 300;
            display: grid;
            grid-template-columns: 20px 3fr 1fr 1fr 20px 20px 20px;
            height: 40px;
            padding: 3px 8px;

            > * {
                grid-row: 1/2;
                display: flex;
                align-items: center;
            }

            &-name {
                grid-column: 2/3;
            }
            &-quantity {
                grid-column: 3/4;
            }
            &-weight {
                grid-column: 4/5;
            }
            &-more {
                grid-column: 5/6;
            }
            &-remove {
                grid-column: 6/7;
            }
        }
    }

    input {
        color: white;
        width: 100%;
        text-align: right;
        background-color: #131313;
        padding: 2px 12px 0px 6px;
        font-size: 18px;
        vertical-align: bottom;
        line-height: 20px;
        border-bottom: 2px solid;
        border-bottom-color: hsla(from crimson h s l / 0.5);
        mask: linear-gradient(135deg,#0000 5px,#000 0);

        &:focus, &:hover, &:active {
            cursor: crosshair;
            border-bottom-color: crimson;
            transition: border-bottom-color .2s;
        }
    }

    button {
        color: white;
    }

}