body{
    width:100vw;
    height:100vh;

    display:grid;
    grid-template-columns: 1fr 60% 1fr;
    grid-template-rows: 1fr auto 1fr;
    grid-template-areas:
        ". . ."
        ". card ."
        ". . .";

    background-color: #778998;
    text-align:center;
}

h2, h4 {
    font-family: Arial, serif;
    color: #c7027f;
}

.card {
    grid-area: card;
    padding:2em;

    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 2em auto;
    grid-template-areas:
        "header"
        "."
        "section";

    background-color: #ffffff;
    border-radius: 4px;
    box-shadow:5px 5px 7px rgba(0,0,0,0.2);
}

.card header{
    grid-area:header;
}

.card section{
    grid-area:section;
}