*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
.page {
    background-color: #eeeeee;
    padding: 40px;
}
.page .up{
    display: grid;
    grid-template-areas: 
        "one one two three" 
        "four five five three"
        "four six six three"
        "seven eight nine ten";
    gap: 8px;
}

.page .up div{
    padding: 10px;
    border-bottom: 3px solid #ff3e02;
    position: relative;
}
.page .up div::after{
    position: absolute;
    content: ' " ';
    color: #777;
    right: 15px;
    bottom: 0;
    font-size: 35px;
}
.one, .two, .four, .six, .seven, .nine, .ten{
    background-color: #ffffff;
}
.three, .five, .eight{
    background-color: black;
    color: white;
}
span {
    font-weight: bold;
}
.job {
    color: #b3b3b3;
}
.one{
    grid-area: one;
}
.two{
    grid-area: two;
}
.three{
    grid-area: three;
}
.four{
    grid-area: four;
}
.five{
    grid-area: five;
}
.six{
    grid-area: six;
}
.seven{
    grid-area: seven;
}
.eight{
    grid-area: eight;
}
.nine{
    grid-area: nine;
}
.ten{
    grid-area: ten;
}