h2	{
	padding-left: 0.2em!important;
	text-transform: uppercase;
	}

.intro { width: 70%; }

.intro p {  font-size: 2em; padding: 10px; margin-bottom: 10px;}


.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container > div {
  flex: 1 0 26%;
}



.flex-container > div {
  min-height: 300px;
  min-width: 200px;
  margin: 8px;
  padding: 10px;
  background-color: transparent;
  border: 2px solid silver;
  font-size: 1.2em;
}



.third {	background-color: transparent; 	padding: 10px; 	}

.third h3	{	font-size: 2em; }

.third p	{	font-size: 1.4em; }



@media ( max-width: 820px) {

	.flex-container > div {
	flex-basis: 36%;
	}

	.intro { width: 80%; margin: 10px; }

	h2 { margin: 10px; }
}


@media ( max-width: 560px) {

	h2 { font-size: 4em; }

	.third h3 { font-size: 2.2em; }

	.third p { font-size: 1.5em; }

	.third img { width: 140px; }

	.flex-container > div {
	flex-basis: 76%;
	}

	.intro { width: 90%; margin: 10px; }
}



.grape {
  background: rgba(0, 0, 0, 0.04);
}



.gray:before {
    content: "";
    position: absolute;
    left: 0;
    -webkit-clip-path: polygon(0 0, 100% 0%, 83% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0%, 83% 100%, 0% 100%);
    height: 73.4em;
    width: 70%;
    margin-top: 1em;
    margin-left: 0;
    z-index: -2;
    background: rgba(0, 0, 0, 0.04);
}