/* 2x3 with 6 at top-left - see CHEE research page */

.grid_2x3_6tl > div {
  border: 2px solid #aaa;
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
  padding: 1em;
  text-transform: uppercase;
  text-align: center;
 }
.grid_2x3_6tl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.grid_2x3_6tl_c1 {
  grid-column: 1;
  grid-row: 1; }
.grid_2x3_6tl_c2 { 
  grid-column: 1;
  grid-row: 2; }
.grid_2x3_6tl_c3 {
  grid-column: 2;
  grid-row: 2 }
.grid_2x3_6tl_c4 {
  grid-column: 1;
  grid-row: 3; }
.grid_2x3_6tl_c5 {
  grid-column: 2;
  grid-row: 3; }
.grid_2x3_6tl_c6 { 
  grid-column: 2;
  grid-row: 1; 
}

/* 3x2 grid (3 cols, 2 rows) for hp feature section
    considering changing "cell" to just "c"  */
    
.grid_3x2-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 24px;
    grid-row-gap: 32px;
}
.grid_3x2-cell1 { grid-area: 1 / 1 / 2 / 2; }
.grid_3x2-cell2 { grid-area: 1 / 2 / 2 / 3; }
.grid_3x2-cell3 { grid-area: 1 / 3 / 2 / 4; }
.grid_3x2-cell4 { grid-area: 2 / 1 / 3 / 2; }
.grid_3x2-cell5 { grid-area: 2 / 2 / 3 / 3; }
.grid_3x2-cell6 { grid-area: 2 / 3 / 3 / 4; }

/* 3 col grid (1 row) with cards - for dept hp */
.grid_3x1-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 24px;
grid-row-gap: 32px;
}
.grid_3x1-cell1 { grid-area: 1 / 1 / 2 / 2; }
.grid_3x1-cell2 { grid-area: 1 / 2 / 2 / 3; }
.grid_3x1-cell3 { grid-area: 1 / 3 / 2 / 4; }


/* 5-col grid (testing, doesn't exist anywhere) */
 .grid_5x1-wrapper {
	 display: grid;
	 grid-template-columns: repeat(5, 1fr);
	 grid-template-rows: 1fr;
	 grid-column-gap: 8px;
	 grid-row-gap: 0px;
}
 .grid_5x1-cell1 { grid-area: 1 / 1 / 2 / 2; }
 .grid_5x1-cell2 { grid-area: 1 / 2 / 2 / 3; }
 .grid_5x1-cell3 { grid-area: 1 / 3 / 2 / 4; }
 .grid_5x1-cell4 { grid-area: 1 / 4 / 2 / 5; }
 .grid_5x1-cell5 { grid-area: 1 / 5 / 2 / 6; }

/* GRIDS - TEST (CSS version) */

.endlessgrid { 
    display: flex; /* fallback - might not be necessary */
    gap: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-auto-rows: minmax(300px, auto);
    grid-gap: 2rem;
} 

.aggregator-block .endlessgrid {                /* - make this more general? */
    grid-auto-rows: auto;
}

.generic .endlessgrid {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
}
.generic .egcell {
    min-width: 290px;
    max-width: 50%;    
}

li.egcell { list-style: none; }

.egcell {
    padding: 0.5rem;
    width: auto;        /* was fit-content */
}

.col-sm > .egcell img {     /* limits size of images in multiple cols */
  max-width: 600px;
}
.featured img, .block article img {
    min-width: 250px;
    width: 100%;   /* temp - not sure this will work for both -- was width: 320px; (max?) */
  /* max-width: 375px; */
}
.ece-research .row { gap: 1rem; }

.ece-research .block { 
    max-width: 30%; 
    margin-bottom: 1rem;
}

/* Non-responsive version */

.grid-container {  
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 24px 20px;
    grid-auto-flow: row;
    grid-template-areas:
        "Cell-1 Cell-2 Cell-3"
        ". . ."
        ". . .";
}
.Cell-1 { grid-area: Cell-1; border: 1px dotted blue; }
.Cell-2 { grid-area: Cell-2; border: 1px dotted blue; }
.Cell-3 { grid-area: Cell-3; border: 1px dotted blue; }

/* responsive version */
/* Section */
.section {
  clear: both;
  margin: 0px;
  padding: 0px;
}
/* Column */
.col {
  background: #eee;
  display: block;
  float:left;
  margin: 1% 0 1% 1%;
}
.col:first-child { margin-left: 0 !important; }

/* Row */
.row:before,
.row:after { content:""; display:table; }
.row:after { clear:both; }
/* .row { zoom:1;  For IE 6/7 - throws error in FF } */ 

/* Grid */
.grid_1_of_3{ width: 32.667% }
.grid_2_of_3{ width: 66.333% }
.grid_3_of_3{ width: 100% }

/* Full Width below 768 pixels */
@media only screen and (max-width: 768px) {
  .col {  margin: 1% 0 1% 0%; }
  [class*='grid_'] { width: 100%; }
}