@media screen and (min-width: 680px) {

    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 10px;
    //background-color: #2196F3;
        padding: 10px;
        margin-right:auto;
        margin-left:auto;
        width:70%;
    }

    .grid-container > div {
        border-color: #d6d6d6;

        border-style: solid ;
        border-width: 2px ;
        text-align: left;
        padding: 20px;
        margin-top:15px;
    }

    .item1 {
        grid-column: 1 / 4;
        justify-self: auto;
    }

    .item1 img {

        width:100%;

    }

    .item2 {
        padding:20px;
        grid-column: 4 / 8;
    }

    .item3 {
        grid-column: 1 / 8;
    }
}

@media screen and (MAX-width: 681px) {


    .grid-container {
        display: grid;
        grid-template-columns: 100% ;
        grid-gap: 10px;
    //background-color: #2196F3;
        padding: 10px;
        margin-top:15px;
        margin-right:auto;
        margin-left:auto;
        width:70%;
    }

    .grid-container > div {
        border-color: #d6d6d6;

        border-style: solid ;
        border-width: 2px ;
        text-align: left;
        padding: 20px;
        margin-top:15px;

    }

    .item1 {
        grid-column: 0 / 1 ;

    }

    .item2 {
        grid-column: 0 / 1 ;
    }

    .item3 {
        grid-column: 0 / 1 ;
    }
    .list_image {

        min-width: 100%;

    }



}