* {
    image-rendering: pixelated;
}

table {
    --size: 64px;
    width: fit-content;
}

tbody {
    display: flex;
    flex-direction: column;

    max-width: 100vw;
    overflow-x: scroll;
}

tr {
    display: flex;
    flex-direction: row;
}

td {
    display: block;
    position: relative;

    padding: 0;

    background-image: url("https://raw.githubusercontent.com/misode/mcmeta/refs/tags/1.21.8-assets-tiny/assets/minecraft/textures/gui/sprites/container/slot.png");
    background-size: cover;
    background-repeat: no-repeat;
}

img {
    display: block;
    pointer-events: none;

    width: 100%;
    height: 100%;
}

a:hover img,
a:active img,
a:focus-visible img {
    background-color: #ffffff74;
}

a {
    display: block;

    width: var(--size);
    height: var(--size);

    padding: calc(var(--size) / 16);

    cursor: pointer;
}