/* Grid with one row and two columns stylesheet */

body {
	background-color: rgb(235, 235, 235);
	}	

.container {
	max-width: 970px; 
	margin: auto;
	padding: 5px 20px 20px 20px;
	}

header {
    text-align: center;
	}

h1 {
	font-size: 1.6em;
	text-align: center;
	}

h2 {
	font-size: 1.2em;
	text-align: center;
	}
	
h3 {
	font-size: 1em;
	line-height: .8em;
	margin-bottom: -.6em;
	font-weight: bold;
	font-style: italic;
	text-align: center;
	color: #0000FF;
	}

h4 {
	font-size: .8em;
	line-height: 1.2em;
	font-weight: bold;
	text-align: center;
	color: black;
	}

.map-caption {
	font-size: .8em;
	margin-top: .2em;
	margin-bottom: .5em;
	text-align: center;
	font-weight: bold;
	}

.style1 {
	color: #9b9898;
	font-size: small;;
	}

.style5 {
	color: #FF0000;
	font-weight: bold;
	text-align: center;
	}


/* --- HARD RESET FOR LAYOUT --- */
.grid-container {
 display: grid !important;
 grid-template-columns: 1.5fr 1fr !important; /* text | map side by side */
 max-width: 900px;
 margin: 0 auto;
 gap: 0;
 padding: 0; /* no inner padding */
}

.column-one {
 background-color: rgb(235, 235, 235);
 padding: 5px;
 font-size: 0.9em;
 border: 1px solid black;
}

.column-two {
 padding: 2px; /* was 5px */
 margin: 0;
 border: 1px solid black; /* full border for the box */
 box-sizing: border-box;
}

.column-one,
.column-two {
 margin: 0; /* ensure no space is added around the boxes */
 box-sizing: border-box;
}

/* MAP FRAME: no extra space around image */
.map-frame {
 display: block;
 border: 1px solid black; /* tight border around the image */
 padding: 0;
 margin: 0;
}

/* MAP IMAGE: no margins */
.map-frame img {
 display: block;
 max-width: 430px;
 width: 100%;
 height: auto;
 margin: 0;
}

/* GLOBAL img */
img {
 display: block;
 margin: 0;
 max-width: 100%;
 height: auto;
}

/* Stack ONLY on small screens */
@media (max-width: 600px) {
 .grid-container {
 grid-template-columns: 1fr !important;
 }
}

picture {
 display: block;
 text-align: center; /* centers inline content inside, like the <img> */
}

.banner-img {
 display: block;
 margin: 0 auto; /* centers the image itself */
 max-width: 100%;
 height: auto;
}