body {
    margin: 0;
    font-family: Arial, sans-serif;
}


.grid {
    display: grid;
    grid-template-columns: .5fr 1fr 2fr .5fr;
    grid-template-rows: 1fr .5fr repeat(3,2fr);
    gap: 0px; 
    padding: 50px; 
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.3);
    padding: 100px;
    text-align: center;
    border: 1px solid #000; 
}


.item1 { background-color: rgba(255, 0, 0, 0.3); }
.item2 { background-color: rgba(255, 0, 0, 0.3); }
.item3 { background-color: rgba(255, 0, 0, 0.3); }
.item4 { background-color: rgba(255, 0, 0, 0.3); }
.item5 { background-color:rgba(255, 0, 0, 0.3); }
.item6 { background-color:rgba(255, 0, 0, 0.3); }
.item7 { background-color: rgba(255, 0, 0, 0.3); }
.item8 { background-color: rgba(255, 0, 0, 0.3); }
.item9 { background-color: rgb(254, 254, 254); }
.item10 { background-color: rgba(128, 128, 0, 0.3);}
.item11 { background-color: rgba(0, 255, 128, 0.3); }
.item12 { background-color: rgb(254, 254, 254); }
.item13 { background-color: rgb(254, 254, 254); }
.item14 { background-color: rgba(128, 128, 0, 0.3); }
.item15 { background-color: rgba(0, 255, 128, 0.3); }
.item16 { background-color: rgb(254, 254, 254); }
.item17 { background-color: rgb(254, 254, 254); }
.item18 { background-color: rgba(128, 128, 0, 0.3); }
.item19 { background-color: rgba(0, 255, 128, 0.3); }
.item20{ background-color: rgb(254, 254, 254); }