.grid {
	position: relative;
	overflow: hidden;
	max-width: 1230px;
	list-style: none;
	text-align: center;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 1em;
	padding-right: 0;
	padding-bottom: 1em;
	padding-left: 0;
	display: flex;  
	flex-wrap: wrap;
}

figure {
	float: left;
	width: 31%;
	height: auto;
	margin: 1%;
	border: 2px solid #333;
	background-color: #FFFFFF;
}
figure.last {
  margin: 0;
}

.example-wrapper {
  float: left;
  margin: 30px 0 0 0;
  width: 50%;
}
.example-wrapper h3 {
  font-weight: 800;
  margin: 0 0 15px 0;
  color: #74777B;
  text-align: left;
}
.example-wrapper pre, .example-wrapper code {
  color: #74777B;
  font-size: 16px;
  line-height: 0.8em;
  float: left;
  text-align: left;
  direction: ltr;
  margin: 0;
  padding: 0;
}

.options-wrapper {
  float: left;
  margin: 30px 0 0 0;
  width: 50%;
}
.options-wrapper h3, .options-wrapper td {
  color: #74777B;
  text-align: left;
}
.options-wrapper h3 {
  font-weight: 800;
  margin: 0 0 15px 0;
}
.options-wrapper td {
  font-size: 16px;
  margin: 0 0 5px 0;
  padding: 5px;
}

/*# sourceMappingURL=demo.css.map */
 /* 如果使用者之視窗寬度介於 768px ~ 979px，將會再載入這裡的 CSS。 */
@media screen and (min-width: 481px) and (max-width: 768px) {
figure {
	float: left;
	width: 47%;
	height: auto;
	background: #3085a3;
	margin: 1%;
}      
}

@media screen and (min-width: 300px) and (max-width: 480px) {
figure {
	float: left;
	width: 98%;
	height: auto;
	background: #3085a3;
	margin: 1%;
}      
}