.box{
    margin-top: 30px;
    width: 100%;
    height: 800px;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(9, 1fr);
    gap: 20px;
    grid-auto-rows: minmax(400px, auto);
    /* responsive
    grid-auto-flow: column;
    grid-template-columns: 186px 186px 186px 186px;
    source dribble : https://dribbble.com/shots/24872695-Nolito-Website-analytics-dashboard */
}

.box1, .box2, .box3, .midbox1, .midbox2, .midbox3, .largebox{
    background-color: white;
    border-radius: 15px;
    width: 100%;
    height: 50%;
    filter: drop-shadow(2px 0 2px gray);
    text-align: center;
    align-content: center;
}

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

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

.box3{
    grid-column: 5 / 7;
    grid-row: 1 / 1;
}

.bigbox{
    grid-column: 7 / 12;
    grid-row: 1 / 4;
    display: flex;
    flex-direction: column;
    justify-content: end;
    text-align: center;
    align-content: center;
    background-color: aquamarine;
    border-radius: 15px;
    width: 100%;
    height: 50%;
    filter: drop-shadow(2px 0 2px gray);
}

.bigbox div{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 90%;
    height: 40%;
    border-radius: 15px;
}

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

.midbox2{
    grid-column: 4 / 7;
    grid-row: 2 / 4;
}

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

.midbox3{
    grid-column: 7 / 12;
    grid-row: 3 / 5;
}