@charset "UTF-8";
/* CSS Grid Components for More SAFE PASSAGE */
	*,
	*:before,
	*:after {
	  box-sizing: border-box;
	}
			
	.wrapper {
	  max-width: 99%; /* 940px; */
	  margin: 0 20px;
	  display: grid;
	  grid-gap: 10px;
	}
.col-a {grid-column: auto / span 2;}

	/* no grid support? */
	.wrapper {
	  display: flex;
	  flex-wrap: wrap;
	}
	.wrapper {
	  display: grid;
	  margin: 0 auto;
	  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));  
	  grid-auto-rows: minmax(150px, auto);
	}
	.panel {
	  /* needed for the flex layout*/
	  margin-left: 5px;
	  margin-right: 5px;
	  flex: 1 1 150px;  
	}
	.panel-margins {
		margin-left: 5%;  
		margin-right: 5%; 
	}
	img.inset-center {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width:100%;
		padding-left: 5px;
		padding-right: 5px;
	}
	.wrapper > * {
	  text-align: left;     
	  /* border-radius: 5px; */
	  padding: 5px; /* 20px; */
	  /* font-size: 150%; */
	  margin-bottom: 10px;
	}

	/* Set the margin used on flex items to 0 to accommodate gaps in grid.  */
	@supports (display: grid) {
	  .wrapper > * {
		margin: 0;
	  }
	}

	/* under 550 */
	@media only screen and (max-device-width: 550px) {
		.wrapper {
			display: grid;
			margin: 0 auto;
			grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
			grid-auto-rows: minmax(150px, auto);
		}
		img.inset-center {
			display: block;
			margin-left: auto;
			margin-right: auto;
			max-width: 200px; 
			width:100%;
		}
		.panel-margins {
			margin-left: 15%; 
			margin-right: 15%;
		}
	}