body{background-color: black; color: white;}

div{border: 5px solid; border-color: green;}



.mainframe{border: none;;
    display: grid;
    grid-template-rows: 350px 500px 300px 300px;
    grid-template-columns: 475px 200px 300px 300px 200px 475px;
    grid-gap: 50px 10px; 
    padding: 2px;
}


.grid-item-1{grid-row:1/1; grid-column:2/6; background-color: palevioletred; z-index: 2; overflow: auto;}

.grid-item-2{grid-row:2/2; grid-column:3/5; background-color: purple; z-index: 2;overflow: auto;}

.grid-item-3{grid-row:3/3; grid-column:3/3; background-color: blueviolet; z-index: 2;overflow: auto}

.grid-item-4{grid-row:3/3; grid-column:4/4; background-color: blueviolet; z-index: 2;overflow: auto}

.grid-item-5{grid-row:4/4; grid-column:3/5; background-color: rgb(110, 4, 49); z-index: 2;overflow: auto}

.grid-item-6{grid-row: 1/5; grid-column:2/2; z-index: 0; bottom:0%; background-size: cover;}

.grid-item-7{grid-row:1/5; grid-column: 5/5; bottom:0%; background-size: cover;}