/* (A) LIST VIEW BY DEFAULT */
#lgDemo {
  display: grid;
  grid-template-columns: 100%;  
  grid-gap: 1px;
  padding:0px;
}
#sList, #sGrid {
  background: none;
  border: 0px;
  color: #6c0a6c;
}
#sList i {
  background: none;
  border: 0px;
  color: #ff3b30;
  font-size: 16px;   
  margin-right:4px; 
}
.agrid .spanItm {
  width: 100%;
  background: border-box;
  display: block;
  padding:1px 2px 3px 2px;
  text-align: center;
}
#sGrid i{
  background: none;
  border: 0px;
  color: #ff3b30;
  font-size: 16px; 
  margin-right:4px;   
}

#itemHDng {
  display: block;    
  padding:0px;
}
#lgDemo .item {
  padding: 1px;
  border: 1px solid #fbefef;
  background: #000;
  color: #fff;
}
#lgDemo.agridNw .item {
  padding: 1px 1px 1px 18px;
  border: 1px solid #fbefef;
  background: #fff;
  color: #000;
  font-size: 16px;
}
#lgDemo.agrid > .itemHeader {
  padding: 5px;
  /*border: 1px solid #ddd;*/
  background: #ffcc00;
  border-bottom: 1px solid maroon;
  color: #990000;  
  font-size: 16px;
  font-weight: 600;
  grid-column-start: span 3;

}
#lgDemo.agridNw > .itemHeader { 
  padding: 5px;
  background: #ffcc00;
  border-bottom: 1px solid maroon;
  color: #990000;  
  font-size: 16px;
  font-weight: 600;
}
#lgDemo.agridNw .item::before {
  content: ' \273A';
  color: #ff0000;
  font-size: 18px;
  padding-left: 10px;
  position: absolute;
  left: 8px;
}
#lgDemo .item:nth-child(odd) { background: #000;color: #fff; }
#lgDemo.agridNw .item:nth-child(odd) { background: #fff;color: #000; }
#lgDemo.agridNw .item > img { display: none;}
/* (B) TRANSFORM INTO GRID VIEW */
#lgDemo.agrid { 
  grid-template-columns: 33% 33% 33%; 
  grid-column-start: span 3;
}
#lgDemo.agrid .item:nth-child(odd) { background: #000; }
#lgDemo.agridNw .item:nth-child(odd) { background: #fff; }

/* (X) DOES NOT MATTER */
html, body { font-family: arial, sans-serif; }

/*



#lgDemo .item:nth-child(odd) { background: #000;color: #fff; }
#lgDemo.agridNw .item:nth-child(odd) { background: #fff;color: #000; }
#lgDemo.agridNw .item > img { display: none;}
#lgDemo.agrid { grid-template-columns: 33% 33% 33%; }
#lgDemo.agrid .item:nth-child(odd) { background: #000; }
#lgDemo.agridNw .item:nth-child(odd) { background: #fff; }

html, body { font-family: arial, sans-serif; }

*/