.grid {
   display: grid;
   width: 700px;
   justify-content: center;
   grid-template: 150px 100px 190px 15% 18% 13% / repeat(2, 1fr);
   margin: 0 auto;
   grid-column-gap: 10px;
   grid-row-gap: 15px;
}

header {
   text-align: center;
   grid-column: 1 / span 2;
}

.banner {
   text-align: center;
   grid-column: 1 / span 2;
}

.brewpub {
   grid-column: 1 / span 1;
}

.ditos {
   grid-column: 2 / span 1;
}

.brewpub_address {
   grid-column: 1 / span 1;
}

.brewpub_hours {
   grid-column: 1 / span 1;
}

.brewpub_call-us {
   grid-column: 1 / span 1;
}

.ditos_address {
   grid-column: 2 / span 1;
}

.ditos_hours {
   grid-column: 2 / span 1;
}

.ditos_call-us {
   grid-column: 2 / span 1;
}

footer {
   grid-column: 1 / span 2;
}

.box {
   background-color: #e1a32b;
   color: #ffffff;
   font-family: Poppins;
   font-size: 15px;
   font-weight: 500;
   letter-spacing: 0.5px;
   text-align: center;
   padding-top: 10px;
   padding-bottom: 10px;
}

.box.bp {
   background-color: #98c855;
}

.grid p {
   margin-top: 5px;
}

p.delivery-link {
  margin-top: 10px;
  margin-bottom: 0;
}

@media (max-width: 600px) {
   .grid {
      width: auto;
      grid-row-gap: 10px;
      grid-template-columns: 100%;
      grid-template-rows: 150px 145px 155px 140px 190px 120px 230px 140px 195px 120px 100px;
   }

   header {
      text-align: center;
      grid-column: 1 / span 1;
      grid-row: 1 / span 1;
   }

   .banner {
      text-align: center;
      margin-left: 50px;
      margin-right: 50px;
      justify-self: center;
      columnj: 1 / span 1;
      grid-row: 2 / span 1;
   }
   .brewpub 
   {
      grid-column: 1 / span 1;
      grid-row: 3 / span 1;
   }

   .ditos {
      align-self: center;
      grid-column: 1 / span 1;
      grid-row: 7 / span 1;
   }

   .brewpub_address {
      grid-column: 1 / span 1;
      grid-row: 4 / span 1;
   }

   .brewpub_hours {
      grid-column: 1 / span 1;
      grid-row: 5 / span 1;
   }

   .brewpub_call-us {
      grid-column: 1 / span 1;
      grid-row: 6 / span 1;
   }

   .ditos_address {
      grid-column: 1 / span 1;
      grid-row: 8 / span 1;
   }

   .ditos_hours {
      grid-column: 1 / span 1;
      grid-row: 9 / span 1;
   }

   .ditos_call-us {
      grid-column: 1 / span 1;
      grid-row: 10 / span 1;
      
   }

   footer {
      grid-colum: 1 / span 1;
      grid-row: 11 / span 1;
   }

   .box {
      background-color: #e1a32b;
      color: #ffffff;
      font-family: Poppins;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0.5px;
      text-align: center;
   }
   
      .box-black {
      background-color: #e1a32b;
      color: #000000;
      font-family: Poppins;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0.5px;
      text-align: center;
   }

   .box.bp {
      background-color: #98c855;
   }

   h1 {
      font-size: 4em;
      margin-top: 0.8em;
      margin-bottom: 0.6em;
      line-height: 1.1;
   }
}