.grid{
  display:grid;
  gap:40px;
  align-items:stretch;
  grid-template-columns:repeat(var(--cols,4), minmax(0,1fr));
}

.grid > *{ min-width:0 }


.cols-1 {
  --cols: 1;
}
.cols-2 {
  --cols: 2;
}
.cols-3 {
  --cols: 3;
}
.cols-4 {
  --cols: 4;
}
.cols-5 {
  --cols: 5;
}
.grid-12 {
  --cols: 12;
}

.span-1 {
  grid-column: span 1;
}
.span-2 {
  grid-column: span 2;
}
.span-3 {
  grid-column: span 3;
}
.span-4 {
  grid-column: span 4;
}
.span-5 {
  grid-column: span 5;
}
.span-6 {
  grid-column: span 6;
}
.span-7 {
  grid-column: span 7;
}
.span-8 {
  grid-column: span 8;
}
.span-9 {
  grid-column: span 9;
}
.span-10 {
  grid-column: span 10;
}
.span-11 {
  grid-column: span 11;
}
.span-12 {
  grid-column: span 12;
}

.col-5 {
  grid-column: span 5;
}
.col-7 {
  grid-column: span 7;
}

.bento-item.r-1 {
  grid-row: span 1;
}
.bento-item.r-2 {
  grid-row: span 2;
}
.bento-item.r-3 {
  grid-row: span 3;
}
.bento-item.r-4 {
  grid-row: span 4;
}

@media (max-width:1600px) {
  .material-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width:1400px) {
  .grid{
    grid-template-columns:repeat(var(--cols-md, var(--cols,4)), minmax(0,1fr));
  }
  .material-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .grid-12{ 
    --cols-md:12 
  }
  #home_automation .grid {
    grid-template-columns: repeat(2,1fr);
  }
  .cols-4 {
  --cols: 2;
}
}

@media (max-width: 1200px) {
  #hardware .grid,
  #pathways .grid,
  #flush_glazing .grid,
  #system_design .grid, 
  #proof .grid {
    grid-template-columns: 1fr;
  }
  #hardware .grid  .card-media {
    max-height: 300px;
  }
  .cores .core-card{
    grid-column: span 6;
  }
    header.span-7 {
    grid-column: span 12;
  }
}

@media (max-width: 960px) {
  #system_design .grid, #proof .grid {
    grid-template-columns: 1fr;
  }
  .deliverables .deliverable-card,
  .cores .core-card,
  .performance .info-card {
    grid-column: span 12;
  }
  .cols-md-1 {
    --cols-md: 1;
  }
  .cols-md-2 {
    --cols-md: 2;
  }
  .cols-md-3 {
    --cols-md: 3;
  }
  .cols-md-4 {
    --cols-md: 4;
  }
  .grid-12 {
    --cols-md: 6;
  }
  .span-md-1 {
    grid-column: span 1;
  }
  .span-md-2 {
    grid-column: span 2;
  }
  .span-md-3 {
    grid-column: span 3;
  }
  .span-md-4 {
    grid-column: span 4;
  }
  .span-md-5 {
    grid-column: span 5;
  }
  .span-md-6 {
    grid-column: span 6;
  }
  .col-5,
  .col-7 {
    grid-column: span 6;
  }
  .cols-2,
  .cols-3,
  .cols-4 {
    --cols:1;
  }
}

@media (max-width: 920px) {
  #testing .grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 787px) {
/*   .bento-grid .span-1,
  .bento-grid .span-2,
  .bento-grid .span-3,
  .bento-grid .span-4,
  .bento-grid .span-5,
  .bento-grid .span-6,
  .bento-grid .span-7,
  .bento-grid .span-8,
  .bento-grid .span-9,
  .bento-grid .span-10,
  .bento-grid .span-11 {
    grid-column: span 6;
  } */
    #home_automation .grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .grid {
    grid-template-columns: repeat(var(--cols-sm, 1), 1fr);
    gap: 0;
    row-gap: 25px;
  }
  .bento-grid .span-1,
  .bento-grid .span-2,
  .bento-grid .span-3,
  .bento-grid .span-4,
  .bento-grid .span-5,
  .bento-grid .span-6,
  .bento-grid .span-7,
  .bento-grid .span-8,
  .bento-grid .span-9,
  .bento-grid .span-10,
  .bento-grid .span-11 {
    grid-column: span 12;
  }
  .bento-grid .bento-item {
    grid-row: span 2;
  }
    .grid-12 {
    --cols-sm: 12;
  }
  .span-7 {
    grid-column: span 12;
  }
}

@media (max-width: 520px) {
  .cols-sm-1 {
    --cols-sm: 1;
  }
  .cols-sm-2 {
    --cols-sm: 2;
  }
  .span-sm-1 {
    grid-column: span 1;
  }
  .span-sm-2 {
    grid-column: span 2;
  }
  .col-5,
  .col-7 {
    grid-column: span 1;
  }
}