/* AUTO GRID: Set the minimum item size with `--auto-grid-min-size` and you'll get a fully responsive grid with no media queries. */

.grid-four {
--auto-grid-min-size: 20rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
grid-gap: 1rem;
padding:0;
margin:0;
}

/* Presentational styles */
.grid-four-body {
	background: #ffffff;
	padding: 1rem;
	line-height: 1.5;
	text-align: center;
	margin: auto;
	width: 80%;
}

.grid-four-li {
	padding: 7rem 3.879rem;
	text-align: center;
	font-size: 150%;
	border: 1px solid #ccc;
	background: #ccc;
	color: inherit;
	list-style: none;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.grid-four-li:hover { border: 1px solid #046a38 !important; }

.grid-four-li-label {
	bottom: -10rem;
	position: relative;
	padding-bottom: calc(-.75em + -.75vw);
	margin: 3em 0 3em 0;
	background: #ffffff;
	width: calc(100% + 7.655rem);
	left: calc(-3.79rem - .65px);
}





/* USAGE */
/*
 * 
<!-- ROW 1 -->
<div class="item-page">
<div class="page-header" style="width:80%;">
   <h2 itemprop="headline">
      New Featured Products
   </h2>
</div>
<div class="grid-four-body">
   <ul class="grid-four">
      <li class="grid-four-li" style="background-image: url(images/product_images/1338/01-fs-1338.jpg);">Item 1</li>
      <li class="grid-four-li">Item 2</li>
      <li class="grid-four-li">Item 3</li>
      <li class="grid-four-li">Item 4</li>
   </ul>
</div>
</div>
<!-- ROW 2 -->
<div class="item-page">
<div class="page-header" style="width:80%;">
   <h2 itemprop="headline">
      Videos
   </h2>
</div>
<div class="grid-four-body">
   <ul class="grid-four">
      <li class="grid-four-li">Video 1</li>
      <li class="grid-four-li">Video 2</li>
      <li class="grid-four-li">Video 3</li>
      <li class="grid-four-li">Video 4</li>
   </ul>
*/