/*Grid-Layout for different screen sizes*/
.container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 2fr 2fr;
    grid-template-areas:
        "left right"   
}

.left {
    max-width: 750px;
}
@media only screen and (max-width: 1180px)
{
    .container {
        grid-template-columns: 1fr;
        grid-template-areas:
        "left"
        "right"
    }
}
/* Small devices */
@media only screen and (max-width: 860px)
{
    .container {
        grid-template-columns: 1fr;
        grid-template-areas:
        "left"
        "mid"
    }
    .left .col3 {
        display: inline-block;
    }
    .mid .col3 {
        display: inline-block;
    }
}

@media only screen and (max-width: 610px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-areas:
        "left" 
        "mid"
    }
    .left .col3 {
        display: none;
    }
}
ul {
    list-style: none;
    padding-left: 0em;
}
.left span {
    display: inline-block;
    /*background-color: rgb(150, 150, 100);*/
}.left .col1 {
    width: 14ch;
    word-break: break-word;
    /*color: red;*/
}
.left .col2 {
    width: 25ch;
    word-break: break-word;
}
.left .col3 {
    width: 20ch;
    word-break: break-word;
}
.left .col4 {
    width: 7ch;
    word-break: break-word;
}