* {
    box-sizing: border-box;
}

.container {
    max-width: 800px;
    aspect-ratio: 1 / 1;
    margin: auto;
}

.bottom-box {
    background-color: darkgreen;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    width: 100%;
    gap: 5px;
}

.row {
    display: flex;
    height: 60px;
    gap: 5px;
}

.item {
    background: lightgreen;
    height: 60px;
    box-sizing: border-box;  
}

.r1-1 {
    width:10%;
}
.r1-2 {
    width:60%;
}
.r1-3 {
    width:30%;
}
    .r2-1 {
        width:10%;
    }
    .r2-2 {
        width:30%;
    }
    .r2-3 {
        width:30%;
    }
    .r2-4 {
        width:10%;
    }
    .r2-5 {
        width:20%;
    }
        .r3-1 {
            width:10%;
        }
        .r3-2 {
            width:17.5%;
        }
        .r3-3 {
            width:10%;
        }
        .r3-4 {
            width:42.5%;
        }
        .r3-5 {
            width:20%;
        }
            .r4-1 {
                width:20%;
            }
            .r4-2 {
                width:10%;
            }
            .r4-3 {
                width:10%;
            }
            .r4-4 {
                width:30%;
            }
            .r4-5 {
                width:30%;
            }
                .r5-1 {
                    width:30%;
                }
                .r5-2 {
                    width:10%;
                }
                .r5-3 {
                    width:20%;
                }
                .r5-4 {
                    width:10%;
                }
                .r5-5 {
                    width:30%;
                }
                    .r6-1 {
                        width:30%;
                    }
                    .r6-2 {
                        width:10%;
                    }
                    .r6-3 {
                        width:20%;
                    }
                    .r6-4 {
                        width:40%;
                    }
                        .r7-1 {
                            width:30%;
                        }
                        .r7-2 {
                            width:10%;
                        }
                        .r7-3 {
                            width:10%;
                        }
                        .r7-4 {
                            width:50%;
                        }
                            .r8-1 {
                                width:10%;
                            }
                            .r8-2 {
                                width:30%;
                            }
                            .r8-3 {
                                width:10%;
                            }
                            .r8-4 {
                                width:10%;
                            }
                            .r8-5 {
                                width:30%;
                            }
                            .r8-6 {
                                width:10%;
                            }
                                .r9-1 {
                                    width:10%;
                                }
                                .r9-2 {
                                    width:20%;
                                }
                                .r9-3 {
                                    width:20%;
                                }
                                .r9-4 {
                                    width:10%;
                                }
                                .r9-5 {
                                    width:10%;
                                }
                                .r9-6 {
                                    width:30%;
                                }
                                    .r10-1 {
                                        width:30%;
                                    }
                                    .r10-2 {
                                        width:30%;
                                    }
                                    .r10-3 {
                                        width:40%;

                                    }

.top-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    height: 100%;
    pointer-events: none; /* prevents blocking */
    gap: 5px;
}

.column {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 5px;
}

.itemc {
    flex-grow: 1;
    background: none;
}

.c1-1 {
    height:40%;
}
.c1-2 {
    height:20%;
}
.c1-3 {
    height:40%;
}