.panels {
  overflow:hidden;
  background:#fff;
  height:calc(100% - 144px); /* 144px = mastHead height + header height */
  display: grid;
  grid-gap: var(--panelGrid-gap);
  grid-template-columns: calc(100% - 453px) calc(453px - var(--panelGrid-gap));
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 
  "panel1 panel2"
  "panel1 panel3";
}

@media(max-width: 1367px) {
  .panels {
    grid-template-columns: calc(100% - 400px) calc(400px - var(--panelGrid-gap));
  }
}

@media(max-width: 1150px) {
  .panels {
    grid-template-columns: calc(100% - 300px) calc(300px - var(--panelGrid-gap));
  }
}

@media(max-width:700px) {
  .panels {
    display: block;
  }
}

.panel-1 {
  grid-area: panel1;
  background-color:#0f1420;
  position: relative;
/*  background-image: url('/wp-content/themes/westcott/static/images/hero-bg-1.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;*/
}

.panel-2 {
  grid-area: panel2;
  background:#0f1420;
}

.panel-3 {
  grid-area: panel3;
  background:#0f1420;
}

@media(max-width:700px) {
  .panel-1,
  .panel-2,
  .panel-3 {
    border-bottom: 6px solid #fff;
  }
}