main :is(h2, h3, h4) {
    margin-bottom: 0.4em;
}

main {
    display: grid;
    grid-template-columns: 400px auto;
    grid-template-areas: "header header"
                         "categories barrels"
                         "footer footer";
    gap: 1em;
    padding: 10vh 10vw;
}
main > header {
      grid-area: header;
}
#barrel-list {
    grid-area: barrels;
    font-size: 12px;
    padding-left: 5vw;
}
.barrel-filter button {
    fill: gray;
    border: solid 1px black;
    border-radius: 3px;
}
.barrel-filter--active {
    background-color: yellow;
}
.barrel-filter__group {
    margin: 0 1rem;
    font-size: 0;
    border: solid 1px black;
    border-radius: 3px;
    display: inline-block;
}
.barrel-filter__group button {
    font-size: 12px;
    border: none;
    border-radius: 0;
    margin: none;
}
.barrel-filter__group button:not(:last-child) {
    border-right: solid 1px black;
}
#barrel-list p {
    max-width: 500px;
}
#barrel-list .barrel {
    box-sizing: border-box;
    padding-top: 20px;
    height: 100px;
    transition: opacity 0.5s;
    overflow: hidden;
}
#barrel-list .barrel.barrel--hidden {
    opacity: 0.2;
}
#barrel-categories {
    grid-area: categories;
}
#barrel-categories section {
    padding-bottom: 2em;
}
#barrel-categories p {
    margin: 0;
    margin-bottom: 0.2em;
}
svg {
    /*      padding-bottom: 1em; */
    display: block;
}
svg ~ p {
    margin-top: 0.25em;
}

.letters-expanded {
    font-size: 0.8em;
    font-weight: normal;
}

.barrel-categories {
    max-width: 500px;
}

.barrel-categories section {
    padding-bottom: 20vh;
}