.wrapper {
    display: grid;
    grid-template-columns: 
        1fr
        min(70ch, calc(100% - 2rem))
        1fr;
    gap: 1.5rem; /* Increased vertical spacing */
}

.wrapper > * {
    grid-column: 2;
}

.full-bleed {
    width: 100%;
    grid-column: 1 / -1;
    margin: 1.5rem 0; /* Increased spacing around images */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

p {
    margin-bottom: 1.25rem; /* Slightly increased paragraph spacing */
    hyphens: auto; /* Better text wrapping */
}

.center {
    text-align: center;
}

h1.center {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: #424874;
    line-height: 1.2;
}

/* ===== LARGE SCREEN ENHANCEMENTS (Min-width: 1200px) ===== */
@media (min-width: 1200px) {
    body {
        font-size: 18px; /* Improved base font size */
    }
    
    .wrapper {
        grid-template-columns: 
            minmax(2rem, 1fr)  /* Reduced side gutters */
            minmax(auto, min(90ch, 100% - 4rem)) /* Wider content area */
            minmax(2rem, 1fr); /* Reduced side gutters */
        max-width: 1600px; /* Prevent excessive width */
        margin: 0 auto; /* Center content on very wide screens */
    }
    
    h1.center {
        font-size: clamp(2.2rem, 3.5vw, 3.2rem); /* Better heading scaling */
        margin-top: 2.5rem;
    }
    
    .full-bleed {
        margin: 2rem 0; /* More breathing room for images */
    }
    
    p {
        margin-bottom: 1.5rem; /* Increased paragraph spacing */
    }
}

/* ===== MOBILE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
    
    .wrapper {
        grid-template-columns: 
            1rem 
            1fr 
            1rem;
        gap: 1rem;
    }
    
    h1.center {
        font-size: clamp(1.5rem, 5vw, 2.2rem);
    }
    
    .full-bleed {
        margin: 1rem 0;
    }
}