.band {
  width: 50%;
  max-width: 1240px;
  margin: 0 auto;
   
  display: grid;
   
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 1px;
  border: 1px solid #000
}

@media only screen and (min-width: 500px) {
  .band {
    grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	}

@media only screen and (min-width: 850px) {
  .band {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  	}
	}

.logo 	{
	background: white;
  	text-decoration: none;
    	text-align: center;
	}

.header	{
        font-family: 'Montserrat', serif;
        font-size: 50px;
	color: black;
	padding-left: 4px;
	padding-top: 4px;
	background-image: linear-gradient(to right, #aba4a4, white);
    	vertical-align: middle;
	grid-column: 2 / 5;
	}

.card {
	background: #8e2323;
	text-decoration: none;
  	color: white;
        font-family: 'Oswald', Arial;
	font-size: 24px;
	text-align: right;
	padding: 5px 5px 2px;
  	border: 1px solid #000;
	}

.card2 {
	background: white;
	text-decoration: none;
  	color: black;
        font-family: 'Oswald', Arial;
	font-size: 24px;
	text-align: right;
	padding: 5px 5px 2px;
	border: 1px solid #000;
	}

.card2a {
	background: white;
	text-decoration: none;
  	color: black;
        font-family: 'Oswald', Arial;
	font-size: 24px;
	text-align: center;
	padding: 5px 5px 2px;
	border: 1px solid #000;
	grid-row: span 2;
	}

.card3 {
	background: #003366;
	text-decoration: none;
  	color: white;
        font-family: 'Oswald', Arial;
	font-size: 24px;
	text-align: right;
	padding: 5px 5px 2px;
	border: 1px solid #000;
	}

.bigcard {
	background: #ccc;
 	background-image: url("kcsunset2.jpg");
  	background-size: cover;
	text-decoration: none;
  	color: white;
        font-family: 'Oswald', Arial;
	font-size: 24px;
	text-align: right; 
	padding: 250px 5px 5px 5px;
	border: 1px solid #000;
	grid-column: 3 / span 2;
	grid-row: 2 / span 3;
	}

.bigcard2 {
	background: #ccc;
 	background-image: url("kcsunset2.jpg");
  	background-size: cover;
	text-decoration: none;
  	color: white;
        font-family: 'Oswald', Arial;
	font-size: 24px;
	text-align: right; 
	padding: 250px 5px 5px 5px;
	border: 1px solid #000;
	grid-column: 1 / span 2;
	grid-row: 2 / span 3;
	}

.bigcard3 {
	background: #ccc;
 	background-image: url("tvimage.jpg");
  	background-size: cover;
	text-decoration: none;
  	color: white;
        font-family: 'Oswald', Arial;
	font-size: 24px;
	text-align: right; 
	padding: 250px 5px 5px 5px;
	border: 1px solid #000;
	grid-column: 3 / span 2;
	grid-row: 2 / span 3;
	}

.mediumcard {
	background: #ccc;
  	background-size: cover;
	text-decoration: none;
  	color: white;
	border: 1px solid #000;
	grid-column: 1 / span 2;
	grid-row: 2 / span 2;
	}

        #bottom {
            position: relative;
            bottom: 0;
	}

.mediumcard2 {
	background: #ccc;
  	background-size: cover;
	text-decoration: none;
  	color: white;
	border: 1px solid #000;
	grid-column: 3 / span 2;
	grid-row: 2 / span 2;
	}

        #bottom {
            position: relative;
            bottom: 0;
	}



.footer {
	background-image: linear-gradient(to right, #f9f9f9, white);
	text-decoration: none;
        font-family: 'Montserrat', serif;
	font-size: 18px;
	text-align: left;
	grid-column: 1 / 5;
	padding: 5px;
	}

.footer2 {
  	background: navy;
  	text-decoration: none;
	border: 1px solid #fff;
  	color: white;
        font-family: 'Oswald', Arial;
	font-size: 36px;
	text-align: right;
	padding: 5px;
	grid-column: 1 / 5;
}

.banner-container {
  position: relative;
  display: inline-block; /* Makes the container wrap tight around your image size */
  
}

.banner-container img {
  display: block;
  width: 100%;
  height: auto;
}

.text-banner {
  position: absolute;
  bottom: 15px;        
  right: 15px;         
  width: max-content;
  background-color: #8e2323;  
  padding: 8px 16px; 
  text-align: right;
}

.text-banner p {
  margin: 0;
  color: #ffffff;      /* Crisp white text over dark banners */
  font-size: 24px;
  font-family: 'Oswald', Arial;
  letter-spacing: 1px;
}


	a:link {
 	 text-decoration: none;
	color: black;
	}

	a:visited {
  	text-decoration: none;
	color: black;
	}

	.card a:link {
 	 text-decoration: none;
	color: white;
	}

	.card a:visited {
  	text-decoration: none;
	color: white;
	}

	.mediumcard a:link {
 	 text-decoration: none;
	color: white;
	}

	.mediumcard a:visited {
  	text-decoration: none;
	color: white;
	}

	.bigcard a:link {
 	 text-decoration: none;
	color: white;
	}

	.bigcard a:visited {
  	text-decoration: none;
	color: white;
	}

	.bigcard2 a:link {
 	 text-decoration: none;
	color: white;
	}

	.bigcard2 a:visited {
  	text-decoration: none;
	color: white;
	}

	.bigcard3 a:link {
 	 text-decoration: none;
	color: white;
	}

	.bigcard3 a:visited {
  	text-decoration: none;
	color: white;
	}

	.card3 a:link {
 	 text-decoration: none;
	color: white;
	}

	.card3 a:visited {
  	text-decoration: none;
	color: white;
	}

	.footer2 a:link {
 	 text-decoration: none;
	color: white;
	}

	.footer2 a:visited {
  	text-decoration: none;
	color: white;
	}