#grid1{
    display: grid;
    grid-template-columns: 50vw 50vw;
    grid-template-rows: 40vw 40vw;
    justify-items: center;
    margin-bottom: 2%;
    margin-top: 5%;
    
}

#img01 {
    width: 110%;

grid-column-start: 1;

grid-column-end: 2;

grid-row-start: 1;

grid-row-end: 3;

justify-self: start;

align-self: center;
margin-top: 65%;

margin-left: 6%;
}
#img02{
    width: 106%;

    grid-column-start: 2;
    
    grid-column-end: 3;
    
    grid-row-start: 1;
    
    grid-row-end: 2;
    
    justify-self: end;
    
    margin-left: 10%;
}
@media (max-width:800px){
    #grid1{
        display: grid;
        grid-template-areas: "img01" 
        "img02";
        grid-template-columns: 100vw;
        grid-template-rows: 50vh 50vh;
        justify-content: center;
        margin-bottom: 2%;
        margin-top: 5%;
        row-gap: 1rem;
    }
    #grid1 img{
        height: 100%;
        object-fit: cover;
    }
    #img01{
        grid-area: img01;
        
        justify-self: center;
        width: 91%;
        margin: 0;
    }
    #img02{
        grid-area: img02;
          
        justify-self: center;
        width: 91%;
        margin: 0;
    }
    
}
.hero-coi2014 img{
    object-position: top;
}