.banner {margin-bottom: 25px;}
h1.progress {
	color: #931a4d;
	font-weight: bold;
	font-size: 2.4em;}
.featured {
	display: flex; 
	gap: 0; 
	align-items: center;  
	background-color: #e5e5e5; 
	border-radius: 6px;
	margin-bottom: 20px;
	overflow: hidden;}
.featured img{ 
	height: auto; 
	max-width: 400px; 
	border-radius: 6px 0 0 6px;
	object-fit: cover;
	object-position: center;}
.featured h2 {font-size: 1.2em;}
.text-box {
	flex: 1; 
	padding: 30px 50px;}
.text-box h2, .text-box h3 {color: #ef4036; font-weight: bold;}
.text-box p {font-size: 0.8em;}
.featured .text-box p {font-size: 1em;}
.text-box a.button{
	background: linear-gradient(60deg, #991c4c, #ea3e37);
	text-transform: none;
	padding: 10px 35px;
	font-size: 0.9em;
	font-weight: bold;
	border-radius: 6px;
}
.text-box a.button:hover{
	background: linear-gradient(60deg, #ea3e37, #991c4c);
}
.grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	max-width: 1024px;
	margin: auto;
}
.grid a{text-decoration: none;}
.item {
    flex: 1 1 calc(50% - 10px); /* 2 columns: 50% width minus gap */
    font-size: 1.2rem;
    box-sizing: border-box;
    border-radius: 6px;
	border: 1px solid #000;
  }
.item img{ 
	border-radius: 6px 6px 0 0;
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}
.content-box h2 {color: #931a4d; font-weight: bold;}
.content-box h3, .pull-quote {color: #ef4036; font-size: 1em; font-weight: bold;}

/* Mobile view: 1 column */
@media (max-width: 839px) {
    .featured, .grid {
        flex-direction: column; /* Stack items vertically */
    }
	.featured img {width: 100%; max-width: 1000px; border-radius: 6px 6px 0 0;}
}