.parent {
    display: grid;
    grid-template-columns: 0.5fr 0.6fr 1fr;
    /* grid-template-rows: repeat(11, 1fr); */
    grid-column-gap: 1px;
    grid-row-gap: 1px;
    background-color:#000;
    border:1px solid #000;
    margin: 0 auto;
    width: stretch;
}
.parent div{background-color:#fff;padding:1rem;}
.parent div a{
    display:block;
}
.parent div a::before{
    content: ">";
    margin-right: 0.25rem;
    display: inline-block;
    transform: scaleX(.5);
}

.div1 { grid-area: 1 / 1 / 12 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 4; }
.div3 { grid-area: 2 / 2 / 3 / 3; }
.div4 { grid-area: 2 / 3 / 3 / 4; }
.div5 { grid-area: 3 / 2 / 4 / 4; }
.div6 { grid-area: 4 / 2 / 5 / 4; }
.div7 { grid-area: 5 / 2 / 6 / 4; }
.div8 { grid-area: 6 / 2 / 7 / 4; }
.div9 { grid-area: 7 / 2 / 8 / 4; }
.div10 { grid-area: 8 / 2 / 9 / 4; }
.div11 { grid-area: 9 / 2 / 10 / 3; }
.div12 { grid-area: 9 / 3 / 10 / 4; }
.div13 { grid-area: 10 / 2 / 11 / 4; }
.div14 { grid-area: 11 / 2 / 12 / 4; }

@media screen and (max-width:768px) {
    .parent {
        display:flex;
        flex-direction: column;
        gap:0;
        width: 100%;
        background-color:#fff;
        font-size:14px;
    }
    .div2 { margin-left: 1rem;border-top:1px solid #000;border-left:1px solid #000; }
    .div3 { margin-left: 1rem;border-top:1px solid #000;border-left:1px solid #000; }
    .div4 { margin-left: 2rem;border-top:1px solid #000;border-left:1px solid #000; 
        position:relative;}
    .div4::before{
        content: "";
        position:absolute;
        top:-1px;
        left:-33px;
        width: 16px;
        height: calc(100% + 1px);
        display: block;
        margin: 0 1rem;
        border-left:1px solid #000;
    }
    .div5 { margin-left: 1rem;border-top:1px solid #000;border-left:1px solid #000; }
    .div6 { margin-left: 1rem;border-top:1px solid #000;border-left:1px solid #000; }
    .div7 { margin-left: 1rem;border-top:1px solid #000;border-left:1px solid #000; }
    .div8 { margin-left: 1rem;border-top:1px solid #000;border-left:1px solid #000; }
    .div9 { margin-left: 1rem;border-top:1px solid #000;border-left:1px solid #000; }
    .div10 { margin-left: 1rem;border-top:1px solid #000;border-left:1px solid #000; }
    .div11 { margin-left: 1rem;border-top:1px solid #000;border-left:1px solid #000; }
    .div12 { margin-left: 2rem;border-top:1px solid #000;border-left:1px solid #000; 
        position:relative;}
    .div12::before{
        content: "";
        position:absolute;
        top:-1px;
        left:-33px;
        width: 16px;
        height: calc(100% + 1px);
        display: block;
        margin: 0 1rem;
        border-left:1px solid #000;
    }
    .div13 { margin-left: 1rem;border-top:1px solid #000;border-left:1px solid #000; }
    .div14 { margin-left: 1rem;border-top:1px solid #000;border-left:1px solid #000; }
}