* {
	box-sizing: border-box;
	}
	
html {
	font-family: "MillerText", "Times New Roman", serif;
	font-size: 20px;
	line-height: 1.2;
	}

body {
	margin: 0;
	padding: 1rem 1.5rem 2rem 1.5rem ;
	}
	
	h1 {
		font-family: "ITC Lubalin Graph VL", sans-serif;
		font-size: 3rem;
		line-height: 1;
		text-align: center;
		text-transform: uppercase;
		font-weight: normal;
		margin: 0;
		padding-left: 2rem;

		}	
		
	h2 {
		font-family: "ITC Lubalin Graph VL", sans-serif;
		font-size: 1.5rem;
		line-height: 1;
		text-align: center;
		text-transform: uppercase;
		font-weight: normal;
		margin: 0;
		padding-left: 2rem;
		}
	
	p {
		text-align: justify;
		margin: 0;
		hyphens: auto;
		padding-left: 2rem;
		text-indent: -2rem;
		}

		p img {
			padding-left: 2rem !important;
			width: calc(100% + 2rem);
			max-width: calc(100% + 2rem);
			}
		
	a {
		color: black;
		text-decoration: none;
		}			
		
		a:visited {
			color: black;
			}
						
/* 
main {
	width: 100%;
	display: grid;
	grid-row-gap: 2rem;
	column-gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	grid-auto-rows: 0;
	}

article {
	width: 100%;
	display: grid;
	column-gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
	}	
 */
	
	
.main {
  border: 1px solid;
}

.main:after {
  display: block;
  content: '';
  clear: both;
}

.grid-col {
  float: left;
  width: 49%;
  margin-right: 2%;
  background: #DDD;
}

.grid-col--4 { margin-right: 0; }

/* hide two middle */
.grid-col--2, .grid-col--3 { display: none; }

.grid-item {
  background: #09D;
  margin-bottom: 20px;
}
	
	
@media ( min-width: 768px ) {
  .grid-col { width: 32%; }
  .grid-col--2 { display: block; }
}

@media ( min-width: 1200px ) {
  .grid-col { width: 23.5%; }
  .grid-col--2, .grid-col--3 { display: block; }
}