h3{ margin:0px 0}

.col:nth-child(1) { background: pink; padding: 0.5em;}
.col:nth-child(2) { background: lavender; padding: 0.5em;}
.col:nth-child(3) { background: ivory; padding: 0.5em;}

.container {
	max-width: 340px; margin-left: auto; margin-right:auto;
}
.container img {
	max-width: 120px;display:block; height:auto;margin-left:auto;margin-right:auto; margin-bottom: 10px; 
}

@media (min-width: 500px) {
	.container img {width: 100%; height: auto}
	.container {
		display: table;
		border-spacing: 16px;
		max-width: 640px;
		margin-left:auto; margin-right:auto;
	}
	.col {
		display: table-cell;
		box-sizing: border-box; 
		cell-spacing: 8px;
		
		vertical-align: top
	}
	h4 {margin-top: 0.5em}
	.col:nth-child(1) { width: 19% }
	.col:nth-child(2) { width: 39% }
	.col:nth-child(3) { width: 39% }
}
.demo1-wrap { background: slateblue; margin: 2em; }
.demo1-col-1 { background: pink; padding: 4px; }
.demo1-col-2 { background: lavender; padding: 4px; }
.demo1-col-3 { background: beige; padding: 4px; }

@media (min-width: 500px) {
	.demo1-wrap {max-width: 560px; margin-left:auto;margin-right:auto; }
	.demo1-col-1 { float: left; width: 33%; box-sizing: border-box; }
	.demo1-col-2 { float: left; width: 33%; box-sizing: border-box; }
	.demo1-col-3 { float: left; width: 33%; box-sizing: border-box; }
}
@media (min-width: 500px) {
	.demo2-wrap { 
		float: left; background: gainsboro; padding: 5px;
		background-image: linear-gradient( to right, pink 0%, pink 33%, lavender 33%, lavender 66%, beige 66%, beige 100%)  
	}
	.demo2-wrap:after { content:" "; display: table; margin-bottom: 2em; }
}
#img1, #img2 {width:300px;height:85px}

@media only screen and (min-width:460px) {
#img1, #img2 {width:400px;height:120px}
}

@media only screen and (min-width:980px) {
#img1, #img2 {width:600px;height:200px}
}

@media only screen and (min-width:1440px) {
#img1, #img2 {width:676px;height:240px}
}
.header {background: gray; padding:1ex; color: white; text-transform: uppercase; text-align: center; letter-spacing: 1px}

@media (max-width: 719px) {
	.grid .option { 
		max-width: 280px;
		margin-left: auto; margin-right: auto;
		margin-bottom: 8px;
	}
}
.option { background: gainsboro; margin-bottom: 1em; box-sizing: border-box; }

.grid {
	 margin-left: 16px; margin-right: 16px;
}
.grid p {padding-left: 1ex; padding-right: 1ex}

@media (min-width:720px) {
	.grid {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: repeat(6, 1fr);
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		grid-gap: 1vw;
	}
}

@media (min-width: 720px) and (-ms-high-contrast:none) {
.option:nth-child(1) { -ms-grid-row:1; -ms-grid-column: 1; margin-right: 5px}
.option:nth-child(2) { -ms-grid-row:1; -ms-grid-column: 2; margin-right: 0}
.option:nth-child(3) { -ms-grid-row:2; -ms-grid-column: 1; margin-right: 5px}
.option:nth-child(4) { -ms-grid-row:2; -ms-grid-column: 2; margin-right: 0}
.option:nth-child(5) { -ms-grid-row:3; -ms-grid-column: 1; margin-right: 5px}
.option:nth-child(6) { -ms-grid-row:3; -ms-grid-column: 2; margin-right: 0}
}

@media (min-width: 1024px) and (-ms-high-contrast:none) {
.option:nth-child(1) { -ms-grid-row:1; -ms-grid-column: 1; margin-right: 1em}
.option:nth-child(2) { -ms-grid-row:1; -ms-grid-column: 2; margin-right: 1em}
.option:nth-child(3) { -ms-grid-row:1; -ms-grid-column: 3; margin-right: 0em}
.option:nth-child(4) { -ms-grid-row:2; -ms-grid-column: 1; margin-right: 1em}
.option:nth-child(5) { -ms-grid-row:2; -ms-grid-column: 2; margin-right: 1em}
.option:nth-child(6) { -ms-grid-row:2; -ms-grid-column: 3; margin-right: 0em}
}
@media (max-width: 719px) {
	.grid .option2 { 
		max-width: 280px;
		margin-left: auto; margin-right: auto;
		margin-bottom: 8px;
	}
}
.grid .option2 {
	/* display: grid; */
    /* grid-template-rows: 1fr 0.1fr 0.1fr 1fr 0.6fr; */
    grid-template-rows: auto  auto auto auto auto 1fr  ;
    /* grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));  */
    max-width: 280px;
    grid-gap: 0px;
    
}
.grid .option2 div {    padding: 0 0.8em;  display: flex;box-sizing: border-box; justify-content: left;}
.grid .option2 p { padding: 0 0.4em; box-sizing: border-box; margin: 0; }
/* .grid .option2 p:last-child { text-align: left;  padding-top: 0.5em; }  */

.head {margin:0; padding: 0; box-sizing: border-box; display: flex; justify-content: left;	align-self: start; overflow: hidden;}
.image {  box-sizing: border-box; display: flex; justify-content: center;align-items:start}
.shortdesc {margin:1em 0;   padding:  0; box-sizing: border-box;  overflow: hidden;}
.desc {  padding: 0 0.8em; box-sizing: border-box; justify-content: center;	align-self: start; overflow: hidden;}
.contact {margin: 0.3em 0; padding: 0 0.8em; box-sizing: border-box; display: flex; justify-content: center;align-items:start};
.contact-left {margin: 0.3em 0; padding: 0 0.8em; box-sizing: border-box; display: flex;};