* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}
body {
    min-height: 100%;
}

.grid-container > * {
    box-shadow: 1px  1px 7px 0px rgb(57, 55, 55);
    text-align: center;
}

.header {
    grid-area: header;
    border-radius: 10px;
}

.main {
    grid-area: main;
    background: linear-gradient(to right, #13747D, #FCF7C5);
    padding: 30px;
}

.footer {
    grid-area: footer;
    background-color: #333;
    color: #FFF;
    text-align: center;
    clear: both;
    border-radius: 0 0 10px 10px;
}

@media(max-width: 600px){
.grid-container{
    display: grid;
    gap: 5px;
    grid-template:
    "header header"    auto
    "main   main"      auto
    "footer footer"    auto /
    200px   auto ;    
}
}