.collective-grid-container {
    display: grid;
    grid-template-columns: 1.7fr 0.2fr 0.6fr 1.5fr 1fr 1fr 0.5fr 0.9fr 1.6fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 15px 15px;
    grid-auto-flow: row;
    grid-template-areas:
        ". . . . . . . . . . . . orangebox . . . . . ."
        ". . . . . img2 img2 img2 img2 img2 img4 img4 img4 . . . . . ."
        ". . . . . img2 img2 img2 img2 img2 img4 img4 img4 . . . . . ."
        ". . bluebox img1 img1 img2 img2 img2 img2 img2 img4 img4 img4 greenbox . . . . ."
        ". . . img1 img1 img2 img2 img2 img2 img2 artisnotsold artisnotsold artisnotsold artisnotsold artisnotsold . . . ."
        ". . . img1 img1 img2 img2 img2 img2 img2 artisnotsold artisnotsold artisnotsold artisnotsold artisnotsold . . b ."
        ". artforpeople artforpeople artforpeople artforpeople artforpeople img3 img3 img3 img3 artisnotsold artisnotsold artisnotsold artisnotsold artisnotsold img6 img6 img6 ."
        ". artforpeople artforpeople artforpeople artforpeople artforpeople img3 img3 img3 img3 artisnotsold artisnotsold artisnotsold artisnotsold artisnotsold img6 img6 img6 ."
        ". artforpeople artforpeople artforpeople artforpeople artforpeople img3 img3 img3 img3 artisnotsold artisnotsold artisnotsold artisnotsold artisnotsold img6 img6 img6 ."
        ". artforpeople artforpeople artforpeople artforpeople artforpeople img3 img3 img3 img3 img5 img5 img5 img5 img5 img5 img5 img5 ."
        ". artforpeople artforpeople artforpeople artforpeople artforpeople img3 img3 img3 img3 img5 img5 img5 img5 img5 img5 img5 img5 ."
        ". g . . . . . o img7 img7 img5 img5 img5 img5 img5 img5 img5 img5 ."
        ". . . . . . . . img7 img7 img5 img5 img5 img5 img5 img5 img5 img5 ."
        ". . . . . . . . img7 img7 img5 img5 img5 img5 img5 img5 img5 img5 ."
        ". . . . . . . . . . . . . . . . . . .";
    height: fit-content;
    padding: 1rem 0;
}

.artforpeople {
    grid-area: artforpeople;
}

.img1 {
    grid-area: img1;
}

.bluebox {
    grid-area: bluebox;
}

.img2 {
    grid-area: img2;
}

.img3 {
    grid-area: img3;
}

.img4 {
    grid-area: img4;
}

.artisnotsold {
    grid-area: artisnotsold;
}

.orangebox {
    grid-area: orangebox;
}

.greenbox {
    grid-area: greenbox;
}

.img5 {
    grid-area: img5;
}

.img6 {
    grid-area: img6;
}

.b {
    grid-area: b;
}

.img7 {
    grid-area: img7;
}

.o {
    grid-area: o;
}

.g {
    grid-area: g;
}



/* For presentation only, no need to copy the code below */
/* 
.collective-grid-container * {
    border: 1px solid red;
    position: relative;
}

.collective-grid-container *:after {
    content: attr(class);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
} */



.collective-grid-container div img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.box-orange {
    background-color: #F79520;
    width: 41px;
    height: 41px;
}

.box-blue {
    background-color: #52C1EC;
    width: 41px;
    height: 41px;
}

.box-green {
    background-color: #8CC63F;
    width: 41px;
    height: 41px;
}





.script-grant-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "N img1"
        "img2 n1";
    height: 100vh;
    margin-top: 10cap;

}

.N {
    grid-area: N;
}

.img1 {
    grid-area: img1;
}

.img2 {
    grid-area: img2;
}

.n1 {
    grid-area: n1;
}

.script-grant-container .N {
    font-size: 50px;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

.script-grant-container div img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.script-grant-container .n1 {
    display: flex;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    text-align: justify;
    padding: 0 100px;
    line-height: 30px;
}


.artforpeople {
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 40px;
    font-size: 50px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.3;
    height: 385px;
}


.collective-quote {
    text-align: center;
    font-size: clamp(17px, 3vh, 30px);
    font-weight: 700;
    line-height: 38px;
    text-transform: uppercase;
    margin: 65px auto;
    width: 100%;
    max-width: 1440px;
    padding: 2rem;
}

.program-impact {

    padding: 2rem 1rem;
    width: 100%;
    /* max-width: 1440px; */
    padding: 0 30px;
    margin: 50px auto;
    padding-left: 50px;
    max-width: 1440px;
    margin-bottom: 100px;

}

.program-impact-header {
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    margin-top: 50px;
}

.program-impact-content {
    font-size: 20px;
    font-weight: 400;
    line-height: 36px;

}

/* Mobile Devices */
@media (max-width: 600px) {
    .collective-grid-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 1rem;
    }

    .collective-grid-container div img,
    .box-orange,
    .box-blue,
    .box-green {
        width: 100%;
        height: auto;
    }


    .program-impact {

        padding: 2rem 2rem;
        /* padding-left: 50px; */
        max-width: 1440px;
        /* margin-bottom: 100px; */
        text-align: justify;
    }

    .program-impact-content {
        font-size: 17px;

    }
    .program-impact-header{
        font-size: 20px;
        line-height: 30px;
    }
}

/* Tablet Devices */
@media (min-width: 601px) and (max-width: 1024px) {
    .collective-grid-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: auto;
        gap: 15px;
        padding: 1rem;
        grid-template-areas: none;
        /* Simplify layout on tablets */
    }

    .collective-grid-container div {
        grid-column: span 2;
    }

    .collective-grid-container div img,
    .box-orange,
    .box-blue,
    .box-green {
        width: 100%;
        height: auto;
    }
}

/* Desktop (Original Layout) */
@media (min-width: 1025px) {
    .collective-grid-container {
        display: grid;
        grid-template-columns: 1.7fr 0.2fr 0.6fr 1.5fr 1fr 1fr 0.5fr 0.9fr 1.6fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: repeat(15, 1fr);
        gap: 15px;
        grid-template-areas:
            ". . . . . . . . . . . . orangebox . . . . . ."
            ". . . . . img2 img2 img2 img2 img2 img4 img4 img4 . . . . . ."
            ". . . . . img2 img2 img2 img2 img2 img4 img4 img4 . . . . . ."
            ". . bluebox img1 img1 img2 img2 img2 img2 img2 img4 img4 img4 greenbox . . . . ."
            ". . . img1 img1 img2 img2 img2 img2 img2 artisnotsold artisnotsold artisnotsold artisnotsold artisnotsold . . . ."
            ". . . img1 img1 img2 img2 img2 img2 img2 artisnotsold artisnotsold artisnotsold artisnotsold artisnotsold . . b ."
            ". artforpeople artforpeople artforpeople artforpeople artforpeople img3 img3 img3 img3 artisnotsold artisnotsold artisnotsold artisnotsold artisnotsold img6 img6 img6 ."
            ". artforpeople artforpeople artforpeople artforpeople artforpeople img3 img3 img3 img3 artisnotsold artisnotsold artisnotsold artisnotsold artisnotsold img6 img6 img6 ."
            ". artforpeople artforpeople artforpeople artforpeople artforpeople img3 img3 img3 img3 artisnotsold artisnotsold artisnotsold artisnotsold artisnotsold img6 img6 img6 ."
            ". artforpeople artforpeople artforpeople artforpeople artforpeople img3 img3 img3 img3 img5 img5 img5 img5 img5 img5 img5 img5 ."
            ". artforpeople artforpeople artforpeople artforpeople artforpeople img3 img3 img3 img3 img5 img5 img5 img5 img5 img5 img5 img5 ."
            ". g . . . . . o img7 img7 img5 img5 img5 img5 img5 img5 img5 img5 ."
            ". . . . . . . . img7 img7 img5 img5 img5 img5 img5 img5 img5 img5 ."
            ". . . . . . . . img7 img7 img5 img5 img5 img5 img5 img5 img5 img5 ."
            ". . . . . . . . . . . . . . . . . . .";
    }
}



/* Mobile Devices */
@media (max-width: 600px) {
    .script-grant-container {
        display: flex;
        flex-direction: column;
        padding: 1rem;
        gap: 1.5rem;
        height: auto;
    }

    .script-grant-container .N {
        font-size: 32px;
        text-align: center;
        padding: 0px 3px;
    }

    .script-grant-container .n1 {
        font-size: 16px;
        padding: 0 1rem;
        text-align: justify;
    }

    .script-grant-container div img {
        width: 100%;
        height: auto;
    }
}

/* Tablet Devices */
@media (min-width: 601px) and (max-width: 1024px) {
    .script-grant-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        grid-template-areas:
            "N"
            "img1"
            "img2"
            "n1";
        padding: 2rem 1rem;
        height: auto;
    }

    .script-grant-container .N {
        font-size: 40px;
        text-align: center;
    }

    .script-grant-container .n1 {
        font-size: 18px;
        padding: 0 2rem;
    }

    .script-grant-container div img {
        width: 100%;
        height: auto;
    }
}

/* Desktop (Original Layout) */
@media (min-width: 1025px) {
    .script-grant-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 0;
        grid-auto-flow: row;
        grid-template-areas:
            "N img1"
            "img2 n1";
        height: 100vh;
        margin-top: 5cap;
    }

    .script-grant-container .N {
        font-size: 50px;
    }

    .script-grant-container .n1 {
        font-size: 20px;
        padding: 0 100px;
    }
}