/* ===================================================== */
/* ================= LAYOUT ALL PAGES ================== */
/* ===================================================== */


/* =================================== */
/* ========== SMALL SCREENS ========== */
/* =================================== */
@media screen and (max-width: 950px) {
	/* ====== HEADER BANNER ====== */
	.banner {
		background-color: transparent;
		height: 155px;
		background-image: url("../images/header-image.png");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top center;
	}
	.banner-404 {
		background-image: url(../images/404/desert-cactus.jpg);
	}
	nav {
		padding: 0 10px;
		background-color: #FFD700;
	}
	/* ====== MAIN CONTENT CONTAINER INCLUDING ADS ====== */
	.container {
		width: 100%; 
		margin: 40px auto;
	padding: 1rem;
	}
	main, .ads {
		display: grid; 
		width: 100%; 
		margin: 0 auto;
	}
	main {grid-gap: 20px;}
		main > * {
			padding: 5px;
		}

/* ====== ADS ====== */
	.ads > * {grid-gap: 30px; text-align: center;}

			.ads-single, 
			.single, 
			.left-half, 
			.right-half, 
			.left-third, 
			.middle-third, 
			.right-third, 
			.right-two-thirds {
				display: grid;
			}


/* ========== FOOTER ========== */

	footer {
		display: grid;
		grid-gap: 40px;
		padding: 30px 0;
		background: #61271B;
	}
	footer > * {width: 90%; margin: 0 auto;}	
  .footer {
    padding: 20px;
    background-image: linear-gradient(#61271b, #913a28);
  }

		div.icon {
			width: 80%;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
}
/* ======================================= */
/* ========== END SMALL SCREENS ========== */



/* =================================== */
/* ========== LARGE SCREENS ========== */
/* =================================== */
@media screen and (min-width: 950px) {
/* ====== HEADER ====== */
header {
	display: grid;
	grid: auto / repeat(6, 1fr);
	grid-gap: 0px;
	align-items: baseline;
}
	.banner {
		grid-column: 1 / 7;
		height: 280px;
		margin-top: -12px;
		background-image: url("../images/header-image.png");
		background-size: cover;
		background-position: top center;
		background-repeat: no-repeat;
		position: relative;
	}
	.banner-404 {
		background-image: url(../images/404/desert-cactus.jpg);
	}

	button {
		background: transparent;
		border: none;
		cursor: pointer;
	}

/* ====== NAV ====== */
	nav {
		grid-column: 1 / 7;
	}


/* ====== CONTAINS EVERYTHING BELOW HEADER INCLUDING FOOTER ====== */
.container {
	display: grid;
	grid: auto / 1fr min(70ch, calc(100% - 64px)) 1fr;
	width: 100%;
	margin: 40px auto;
}

/* ====== MAIN CONTENT CONTAINER ====== */
		main {
			display: grid;
			grid: auto / repeat(6, 1fr);
			grid-gap: 6vmin;
			grid-column: 2;
			grid-row: 3;
		}

/* ====== MAIN CONTENT PANELS ====== */
			.single {
				grid-column: 1 / 7;
				padding: 0.5rem 1rem;
			}
			.left-half {
				grid-column: 1 / 4;
			}
			.right-half {
				grid-column: 4 / 7;
			}
			.left-third {
				grid-column: 1 / 3;
			}
			.middle-third {
				grid-column: 3 / 5;
			}
			.right-third {
				grid-column: 5 / 7;
			}
			.right-two-thirds {
				grid-column: 3 / 7;
			}

/* ====== ADS ====== */
			.ads {
				display: grid;
				grid: auto / repeat(3, 1fr);
				grid-gap: 40px;
				grid-row: 4;
				grid-column: 2; 
				padding-block: 3vmin;
			}
			.ads > * {
				text-align: center;
			}

/* ====== FOOTER ====== */
/* ========== FOOTER ========== */
			footer {
				display: grid;
				grid: auto / repeat(6, 1fr);
				grid-gap: 20px;
				padding: 25px 15px;
				background: #61271B;
			}
				.footer {
					padding: 20px;
					background-image: linear-gradient(#61271b, #913a28);
				}
				.footer-third {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
				div.icon {
					width: 70%;
					margin: 0 auto;
					display: flex;
					flex-wrap: wrap;
				}
				.copyright {display: inline;}
}
/* ======================================= */
/* ========== END LARGE SCREENS ========== */