ol.collection {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

* {
    box-sizing: border-box;
}

.collection-container {
    display: grid;
    /* grid-template-columns: 1fr; */
    /* grid-gap: 20px; */
}

.item-container {
    background-color: antiquewhite;
    border: 2px solid black;
    /* border-top:  1px solid gray; */
}
.attribute {
    /* border-right: 1px solid gray; */
    /* border-bottom: 1px solid gray; */
    min-height: 1em;
    padding: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.collection-container>.item-container:first-child {
    background-color: var(--main-color);
    color: var(--main-background-color);
}

.item-container:hover {
    background-color: rgb(200, 227, 252);
}

/* Center header labels */
.collection-container>.item-container:first-child .attribute {
    display: flex;
    align-items: center;
    justify-content: center;
    text-overflow: initial;
    overflow: auto;
    white-space: normal;
}


@media screen and (min-width: 452px) {
    /* The maximum column width, that can wrap */
    .item-container{
        display: flex;
        border: none;
        /* background-color: blue; */
        /* min-width: 430px; */
    }

    .attribute-container{
        display: flex;
        /* border-bottom: 1px solid gray; */
    }

    .attr-date{
        min-width: 4em;
        text-align: center;
    }

    .attr-opp{
        min-width: 11em;
    }

    .attr-us{
        min-width: 2em;
        text-align: center;
    }
    .attr-them{
        min-width: 3em;
        text-align: center;
    }
    .attr-wl{
        min-width: 3em;
        text-align: center;
    }
}

@media screen and (min-width: 301px) {
    /* The maximum column width, that can wrap */
    .item-container{
        display: flex;
        /* background-color: blue; */
        /* min-width: 430px; */
    }

    .attribute-container{
        display: gird;
    }

    .attribute{
        border: 1px solid gray;
    }

    .attr-date{
        min-width: 4em;
        text-align: left;
    }

    .attr-opp{
        min-width: 11em;
    }

    .attr-us{
        min-width: 2em;
        text-align: center;
    }
    .attr-them{
        min-width: 3em;
        text-align: center;
    }
    .attr-wl{
        min-width: 3em;
        text-align: center;
    }
}