.canvas-grid-container {
    display: grid;
    grid-template-columns: 1fr 1.3fr 0.6fr 1.1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 50px 20px;
    grid-auto-flow: row;
    grid-template-areas:
        "img1 img1 img1 text1 text1"
        "img1 img1 img1 text1 text1"
        "text2 text2 img2 img2 img2"
        "text2 text2 img2 img2 img2";

    height: fit-content;
}

.img1 {
    grid-area: img1;
}

.text1 {
    grid-area: text1;
}

.text2 {
    grid-area: text2;
}

.img2 {
    grid-area: img2;
}



.cancas-content-text {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    padding: 0 2rem;
    text-align: justify;
    height: 100%;
    justify-content: center;
    font-size: 20px;
}

.canvas-image-container {
    width: 55%;
}

.canvas-content-second {
    margin-top: 3rem;

}


/* ========== RESPONSIVE CANVAS GRID ========== */

/* Small Devices (phones) */
@media (max-width: 600px) {
    .canvas-grid-container {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 0 1rem;
    }

    .canvas-image-container {
        width: 100%;
    }

    .cancas-content-text {
        padding: 0 1rem;
        font-size: 17px;
    }

    .canvas-text {
        padding-left: 5px;
        font-size: 17px;
    }
}

/* Medium Devices (tablets) */
@media (min-width: 601px) and (max-width: 1024px) {
    .canvas-grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        gap: 30px 20px;
        grid-template-areas:
            "img1 img1"
            "text1 text1"
            "text2 text2"
            "img2 img2";
    }

    .canvas-image-container {
        width: 100%;
    }

    .cancas-content-text {
        padding: 0 1.5rem;
    }


}

/* Large Devices (desktop and up) */
@media (min-width: 1025px) {
    .canvas-grid-container {
        display: grid;
        grid-template-columns: 1fr 1.3fr 0.6fr 1.1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        gap: 50px 20px;
        grid-auto-flow: row;
        grid-template-areas:
            "img1 img1 img1 text1 text1"
            "img1 img1 img1 text1 text1"
            "text2 text2 img2 img2 img2"
            "text2 text2 img2 img2 img2";
        height: fit-content;
    }

    .canvas-image-container {
        width: 55%;
    }

    .cancas-content-text {
        padding: 0 2rem;
    }
}