CSS Grid

$break-small: 600px;
$break-large: 900px;
$break-xlarge: 1400px;

.restaurant-wrapper {
	display: grid;
	width: auto;
  grid-template-areas:
    "gutter desc pic gutter2"
    "gutter contact resv gutter2"
    "gutter menus menus gutter2"
    "footer footer footer footer ";
  grid-template-columns: 20px auto 200px 20px;
  grid-template-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;

   @media screen and (max-width: $break-small) {
     grid-template-areas:
       "gutter pic pic  gutter2"
       "gutter desc desc gutter2"
       "gutter resv contact gutter2"
       "gutter menus menus gutter2"
       "footer footer footer footer";
     grid-template-columns: auto ;
     grid-template-rows: 300px auto;
     grid-column-gap: 10px;
     grid-row-gap: 10px;
   }
   @media screen and (min-width: $break-large) {
     grid-template-areas:
       "gutter pic desc resv gutter2"
       "gutter contact menus resv gutter2"
       "footer footer footer footer footer ";
     grid-template-columns: 40px 200px auto 200px 40px;
     grid-template-rows: auto auto;
     grid-column-gap: 10px;
     grid-row-gap: 10px;
   }

   @media screen and (min-width: $break-xlarge) {
     grid-template-areas:
       "gutter pic desc resv gutter2"
       "gutter contact menus resv gutter2"
       "footer footer footer footer footer ";
     grid-template-columns: 40px 300px auto 300px 40px;
     grid-template-rows: auto auto;
     grid-column-gap: 10px;
     grid-row-gap: 10px;
   }