table {
    border-collapse: collapse;
    font-size: 0.8em;
} 

.tableWrap {
    width: 550px;
    height: 400px;
    overflow-y: auto;
}

.tableFlex {
    width: 100%;
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin-bottom: 30px;
}

.ImgWrap img{
    width: 100%;
    height: auto;
}

.ImgWrap {
    width: 650px;
}

th,
  td {
    padding: 8px;
    text-align: left;
    border: 1px solid #ddd;
    line-height: 1.3em;  
  }


td:first-child {
    width: 7%;
    font-weight: bold;
}

td:second-child {
    width: 25%;
}

td:last-child {
    width: 68%;
}

tr:nth-child(even) {background: #EFDCCC;}
tr:nth-child(odd) {background: #D1B7A1;}




@media only screen and (max-width: 1200px){
    
    .tableWrap {
        width: 45%;
    }
    
    ImgWrap {
        width: 50%;
    }
    
}


@media only screen and (max-width: 1000px){
    
    .tableFlex {
        display: block;
    }
    
    .tableWrap {
        width: 80%;
        margin: 0 auto;
        height: auto;
        overflow-y: visible;
    }
    
    .ImgWrap {
        width: 80%;
        margin: 0 auto;
        padding-bottom: 20px;
    }
    
    
}


@media only screen and (max-width: 800px){
    
    .tableWrap {
        width: 100%;
    }
    
    .ImgWrap {
        width: 100%;
    }
    
}

h2 {
    text-align: center;
    font-weight: bold;
    color: red;
}