.site {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows:50px auto 50px;
    min-height: 800px;
	grid-gap: .5em;
    text-align: center;
    grid-template-areas: 
    'header header header header header header header header header header header header'
    'left left main main main main main main main main right right'
    'foot foot foot foot foot foot foot foot foot foot foot foot';
}

.Header {
    grid-area: header;
	background-color: #c5c5a1;
    border-radius: 10px;
}

.LeftSideBar {
    grid-area: left;
	background-color: #00bbf0;
    border-radius: 10px;
}

.MainContent {
    grid-area: main;
	background-color: #8b8b8b;
    border-radius: 10px;
}

.RightSideBar {
    grid-area: right;
	background-color: #58e3ed;
    border-radius: 10px;
}

.foot {
    grid-area: foot;
	background-color: #c5c5a1;
    border-radius: 10px;
}

@media screen and (max-width:800px) {
    .site {
        grid-template-rows:50px auto 50px 50px;
        min-height: 600px;
        grid-template-areas: 
        'header header header header header header header header header header header header'
        'left left left main main main main main main main main main'
        'right right right right right right right right right right right right'
        'foot foot foot foot foot foot foot foot foot foot foot foot';
    }
}