.gridcontainer-block{
    display: grid;
    margin-top: 20px;
    margin-bottom: 20px;
    column-gap: 20px;
    row-gap: 10px;
    justify-items: center;
    grid-template-columns: 20px 1fr 1fr 20px;
    grid-template-rows: 1fr 1fr;
}

.gridcontainer-block div:first-of-type{
    grid-column: 2 / span 2;
    grid-row: 1 / span 2;
    background: #004B9B;
    background: radial-gradient(circle, #0064E1 0%, #004B9B 70%);
    width: 100%;
}

.item-testcase{
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

.item-caseTitle{
    grid-column: 3;
    grid-row: 1;
}

.item-caseDesc{
    grid-column: 3;
    grid-row: 2;
}

#switch1b{
    font-family: Lacquer;
}
#switch2b{
    font-family: Lacquer;
}

@media screen and (min-width:481px)
{
    .gridcontainer-block{
        grid-template-columns: repeat(6,1fr);
    }
    .gridcontainer-block div:first-of-type{
        grid-column: 2 / span 4;
    }

    .item-testcase{
        grid-column: 2 / span 2;
    }
    .item-caseTitle{
        grid-column: 4 / span 2;
    }
    .item-caseDesc{
        grid-column: 4 / span 2;
    }
}

@media screen and (min-width: 768px)
{
    .gridcontainer-block{
        grid-template-columns: repeat(9,1fr);
    }

    .gridcontainer-block div:first-of-type{
        grid-column: 2 / span 7;
    }

    .item-testcase{
        grid-column: 2 / span 3;
    }
    .item-caseTitle{
        grid-column: 6 / span 3;
    }
    .item-caseDesc{
        grid-column: 6 / span 3;
    }
}

@media screen and (min-width:1025px)
{
    .gridcontainer-block{
        grid-template-columns: repeat(12,1fr);
    }

    .gridcontainer-block div:first-of-type{
        grid-column: 3 / span 8;
    }

    .item-testcase{
        grid-column: 3 / span 4;
    }
    .item-caseTitle{
        grid-column: 7 / span 4;
    }
    .item-caseDesc{
        grid-column: 7 / span 4;
    }
}