*{
    box-sizing: border-box;
}

body{
    background-color: #f0f0f0;
}

section{
    border: 1px solid black;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    margin-bottom: 20px;
}

p{
    padding: 20px;
    text-align: center;
    margin: 0px;
    border-radius: 10px;
}

.grid1{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.grid1 p{
    background-color: #e0e0ff;
}

.grid2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.grid2 p{
    background-color: #ffe0e0;   
}
.grid2_item1{
    grid-column: span 2;
}
.grid2_item4{
    grid-column: span 2;
}

.grid3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
}
.grid3 p{
    background-color: #e0ffe0;
}
.grid3_item1{
    grid-column: span 2;
    grid-row: span 2;
}
.grid3_item5{
    grid-row: span 2;
}
.grid3_item7{
    grid-column: span 2;   
}

.grid4{
    display: grid;
    grid-template-areas:
    'header header header header'
    'sidebar main main main'
    'footer footer footer footer';
    gap: 10px;
}
.grid4 p{
    background-color: #ffe0ff;
}

.grid4_item1 { grid-area: header; }
.grid4_item2 { grid-area: sidebar; }
.grid4_item3 { grid-area: main; }
.grid4_item4 { grid-area: footer; }

.grid5{
    display: grid;
    grid-template-areas:
    'header header header'
    'main main menu'
    'main main menu'
    'main main menu'
    'info info info';
    gap: 10px;
}
.grid5 p{
    background-color: #acf0f0;
}

.grid5_item1 { grid-area: header; }
.grid5_item2 { grid-area: main;}
.grid5_item2 {
    background-color: #acf0f0;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
}
.grid5_item3 { 
    grid-area: menu; 
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 10px;
    background-color: #acf0f0;
    border-radius: 10px;
    padding: 5px;
}
.grid5_item3 p{
    background-color: #f4ba6e;
}
.grid5_item4 { 
    grid-area: info;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    background-color: #acf0f0;
    border-radius: 10px;
    padding: 5px;
}
.grid5_item4 p{
    display: inline-block;
    background-color: #f4ba6e;
}


footer{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: center;
    width: 250px;
    margin: auto;
}