.grid 	{
			  display: grid;
			  grid-auto-rows: 1rem;
			  grid-gap: 1rem;
			  grid-template-columns: repeat(auto-fill, minmax(25rem,1fr));
			  margin: 1rem;
			  border: 0px solid green;
}


/* 
<div class="grid">
  <div class="item  ">
    <div class="content">
      <div class="title">
        <h3>1: Blog Post</h3>
      </div>
      <div class="desc">
*/

div.grid-content { /* the container */
	
				box-sizing: border-box;
				padding: 1rem;
				padding-bottom: 0rem;
				line-height: 135%;
}

div.grid-item {
				border: 1px solid lightgray;
				padding: 0rem;
}


div.grid .title {
				border: 0px solid green;
				padding: 0.2rem 0rem;
 }

div.grid-desc {
    			border: 0px solid lightgray;
				padding: 0.1rem 1rem;
}



div.grid-title h1, div.grid-title h2, 
div.grid-title h3 { 
				font-size: 1.0rem;	
				margin: 0rem; padding: 0rem;	
				border: 0px solid purple;
}



div.grid-content h1,
div.grid-content h2,
div.grid-content h3,
div.grid-content h4 { 	
				border: 0px solid purple;
				margin: 0px; 
				 }

div.grid-desc h4 {
    			
				margin-left: -1rem;
				border: 0px solid orange;
				color: darkslategray;
}
				 
div.grid-content  h4 {font-size: 1rem;}				

div.grid-content li {
				padding-bottom: .4rem;
}
				

div.grid-content ul.ul-toc-style,
div.grid-content ul {
					border: 0px solid pink;		
					padding: 0rem;
					margin: .5rem;
					margin-bottom: 0rem;
}



div.grid-content ul.ul-toc-style {
					margin: 0rem;
}

div.grid-content ul li {
					margin-left: 0px; 
					padding-left: 0rem; 
					border: 0px solid cyan;	
  	
}
div.grid-content ul.ul-toc-style li {
				margin-bottom: .4rem;
				line-height: 150%;
				border: 0px solid green;			
}



/* 
.project .grid-title {
				background-color: darkslategray;
}

.blog .grid-title {
  				background-color: gold;
}

.photo .grid-title {
  				background-color: maroon;
}



.grid-desc img{
				float: left;
				margin: 0 10px 10px 0;
				width: 50%;
}

.grid-desc p {
				margin-bottom: .8rem;
}

.photothumb {
				width: 100%;
}

*/