body{
    background-color:black;
}




#container{
display: grid;
grid-template-areas:
"header header header"
"content1 content1 content2"
"content3 content3 content4"
"content3 content3 content5"
"content6 content7 content5"
"footer footer footer";
grid-auto-rows: 120px;
gap: 8px;

}

.header{
    grid-area: header;
    background-color: lightgrey;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:xx-large;
}

.content1{
    grid-area: content1;
    background-color: lightgrey;
    
}

.content1 iframe{
    width: 100%;
    height: 100%;
    border: none;
}

.content2{
    grid-area: content2;
    background-color: lightgrey;
    
    
}
.content2 iframe{
    width: 100%;
    height: 100%;
    border: none;
}

.content3{
    grid-area: content3;
    background-color: lightgrey;
    display:flex;
    justify-content: center;
    align-items: center;

}


.content4{
    grid-area: content4;
    background-color: lightgrey;
    
}

.content4 img{
    width: 100%;
    height: 100%;

}

.content5{
    grid-area: content5;
    background-color: lightgrey;
    
}

.content6{
    grid-area: content6;
    background-color: lightgrey;
    
}

.content6 img{
    width: 100%;
    height: 100%;

}

.content7{
    grid-area: content7;
    background-color: lightgrey;
    
}

.content7 img{
    width: 100%;
    height: 100%;

}