* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    width: 100%;
}

body {
    padding: 16px;
}

.container {
    width: 100%;
    height: 90vh;
    display: grid;
    grid-template-columns: 1fr 3fr repeat(4, 1fr);
    grid-template-rows: 3fr 2fr repeat(6, 1fr);
}

.cell {
    background-color: pink;
    border: 2px solid brown;
    border-radius: 4px;
    align-content: center;
    text-align: center;
}

.c1 {
    grid-row: 1;
    grid-column: 1;
}

.c2 {
    grid-row: 1;
    grid-column: 2;
}

.c3 {
    grid-row: 1/5;
    grid-column: 3;
}

.c4 {
    grid-row: 1/3;
}

.c5 {
    grid-column: 5/7;
}

.c6 {
    grid-column: 1;
    grid-row: 2/4;
}

.c7 {
    grid-row: 2/8;
    grid-column: 2;
}

.c8 {
    grid-row: 2/6;
    grid-column: 5;
}

.c9 {
    grid-row: 2/4;
    grid-column: 6;
}

.c10 {
    grid-row: 4/9;
    grid-column: 1;
}

.c12 {
    grid-row: 4/7;
    grid-column: 6;
}

.c11 {
    grid-row: 5/8;
    grid-column: 3/5;
}