/* MAIN GRID STYLING */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
.about-grid-wrapper {
    display: grid;
    grid-template-rows: repeat(6, 50vh); 
    grid-template-columns: repeat(5, 1fr);
    margin-top: 111px;
}

.about-grid-wrapper > div {
    display: contents; /* let the children (img + text container) map directly to the grid */
}

.about-grid-wrapper img {
    grid-column: span 2; 
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.about-grid-wrapper > div > div,
.about-grid-wrapper > div > h1 {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 20rem 0 20rem;
}
    @media(max-width:1500px) {
        .about-grid-wrapper > div > div,
        .about-grid-wrapper > div > h1 {
            margin: 0 13rem 0 13rem;
        }
    }
    @media(max-width: 1100px) {
        .about-grid-wrapper > div > div,
        .about-grid-wrapper > div > h1 {
            margin: 0 6rem 0 6rem;
        }
    }

/* Other stuff */
/* ------------------------------------------------------ */
#first-about-p{
    margin-bottom: 2.5rem;
    font-size: 3rem;
}

.first-p {
    margin-bottom: 2.5rem;
}

h1 {
    line-height: 1;
}

h2 {
    text-align: left;
    padding-top: 0;
    line-height: 1;
    margin-bottom: 2rem;
    font-size: 5.5rem;
}

#about-final-p {
    margin: 10rem auto 10rem auto;
    text-align: center;
    width: 50vw;
    font-size: 3rem;
}

@media(max-width: 1000px) {
    h1 {
        font-size: 6.5rem;
    }
    h2 {
        font-size: 4rem;
    }
    #about-final-p {
        width: 75vw;
        font-size: 2.5rem;
    }
}

@media (max-width: 700px) {
    .about-grid-wrapper {
        grid-template-columns: 1fr; /* one column */
        grid-template-rows: auto;   /* let rows expand naturally */
    }

    .about-grid-wrapper img,
    .about-grid-wrapper > div > div,
    .about-grid-wrapper > div > h1 {
        grid-column: 1;   /* span full width */
        margin: 0;  
        padding: 2rem;
    }

    /* Optional: stack image above text */
    /* .about-grid-wrapper > div {
        display: block; 
    } */
    /* override display: contents so children stack */

    .about-grid-wrapper img {
        width: 100%;
        height: auto; /* don’t force 50vh on small screens */
    }
    #about-final-p {
        width: 90vw;
        font-size: 2.5rem;
    }
}