.sizing-card {
 border-radius: 1.25rem;
 padding: 3rem 2rem;
 max-width: 1200px;
 margin: 0 auto 4rem auto;
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.sizing-section {
 display: flex;
 flex-wrap: wrap;
 gap: 2rem;
 justify-content: space-between;
}

.trail-header-container .sizing-section {
 display: flex;
 gap: 1.5rem;
 flex-wrap: wrap;
 justify-content: center;
 align-items: stretch;
}

.trail-header-image {
 flex: 1;
 min-width: 300px;
 max-width: 100%;
 object-fit: cover;
 border-radius: 1rem;
 display: block;
}


.trail-card {
 flex: 1;
 min-width: 280px;
 max-width: 360px;
 background-color: white;
 border-radius: 1rem;
 overflow: hidden;
 box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}

.trail-header {
 background-color: #322f33;
 color: #fff;
 font-size: 1.5rem;
 font-weight: 700;
 text-align: center;
 padding: 1rem;
}

.trail-card img {
 width: 100%;
 height: auto;
 display: block;
 padding: 0 1rem; /* <-- Add horizontal padding */
 box-sizing: border-box; /* ensures padding doesn’t overflow the card */
}

.trail-content {
 padding: 1.5rem;
 font-size: 1.1rem;
 line-height: 1.7;
 color: #322f33;
}

.trail-content p {
 margin-bottom: 1rem;
}

.trail-content .btn {
 display: inline-block;
 margin-top: 1rem;
 background-color: #322f33;
 color: white;
 padding: 0.75rem 1.25rem;
 font-weight: 600;
 text-transform: uppercase;
 text-decoration: none;
 border-radius: 4px;
 transition: background-color 0.3s ease;
}

.trail-content .btn:hover {
 background-color: #555;
}