.filter-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 8px;
}

.legend-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 1rem;
}

.mode-select {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hidden {
    display: none;
}

li[data-active] img,
li.random {
    cursor: pointer;
}

li[data-active=false] img {
    opacity: .5;
    filter: grayscale(1);
}

ul {
    padding: 0;
    margin: 0;
}

.selected img {
    border: 4px solid limegreen;
    box-shadow: 0 0 40px black;
}