body {
    margin: 0;
    padding: 40px;
    font-family: Arial, sans-serif;
}
.grid {
    display: grid;
    
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 90px;
    gap: 15px;
}
.grid div {
    background-color: #f4d000;
    color: white;
    height: 60px;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}
 .grid div:nth-child(1) {
    grid-column: span 12;
}
.grid div:nth-child(2),
.grid div:nth-child(3) {
    grid-column: span 6;
}
.grid div:nth-child(4),
.grid div:nth-child(5),
.grid div:nth-child(6) {
    grid-column: span 4;
}
.grid div:nth-child(7),
.grid div:nth-child(8),
.grid div:nth-child(9),
.grid div:nth-child(10) {
    grid-column: span 3;
}
.grid div:nth-child(11),
.grid div:nth-child(12),
.grid div:nth-child(13),
.grid div:nth-child(14),
.grid div:nth-child(15),
.grid div:nth-child(16) {
    grid-column: span 2;
}
.grid div:nth-child(n+17) {
    grid-column: span 1;
}