.mainDiv {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "cell2";
}

.cell1 {
   
}

.cell2 {
    grid-area: cell2;
    border-radius: 5px;
    background-image: linear-gradient(white, whitesmoke);
    border: solid 5px whitesmoke;
    padding: 20px;
}

.cell_customerInputForm {
    display: grid;
    grid-template-columns: 200px 190px;
    grid-template-areas:
        "customerFirstname         customerFirstname    "
        "customerLastname          customerLastname     "
        "customerMail              customerMail         "
        "PeopleTitle PeopleTitle "
        "PeopleTest1 PeopleTest2"
        "customerRequest           customerRequest      ";
    grid-row-gap: 10px;
    align-content: start;
}

.customerFirstname {
    grid-area: customerFirstname;
}

.customerLastname {
    grid-area: customerLastname;
}

.customerMail {
    grid-area: customerMail;
}

.PeopleTitle {
    grid-area: PeopleTitle;
}

.PeopleTest1 {
    grid-area: PeopleTest1;
}

.PeopleTest2 {
    grid-area: PeopleTest2;
}

.customerRequest {
    grid-area: customerRequest;
}

@media screen and (min-width: 700px) {
    .mainDiv {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "cell1 cell2";
    }

    .cell1 {
        background-image: url('../../../images/Minilaesser_bg.png');
        background-size: contain;
        height: 410px;
        width: 547px;
    }

    .cell_customerInputForm {
        display: grid;
        grid-template-columns: 200px 300px;
        grid-template-areas:
            "customerFirstname         customerFirstname    "
            "customerLastname          customerLastname     "
            "customerMail              customerMail         "
            "PeopleTestTitle            PeopleTestTitle     "
            "PeopleTest1 PeopleTest2"
            "customerRequest           customerRequest      ";
        align-content: start;
    }
}