.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    max-width: 1200px;
    margin: 0 auto;
}
/* Card Styling */
.card-work-with {
    background: #E8E0DC; /* Light beige color from image */
    border-radius: 15px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: background-color 0.3s ease;
}
    .card-work-with:hover {
        background: #241C4F;
    }
        .card-work-with:hover h3 {
            color: white;
        }
    .card-work-with h3 {
        margin-bottom: 15px;
        color: #241C4F;
        font-family: Poppins;
        font-size: 23.035px;
        font-weight: 700;
        letter-spacing: 0.3px;
    }

    .card-work-with img {
        width: 100%;
        height: auto;
        border-radius: 10px;
        object-fit: cover;
    }
/* Desktop Layout Adjustments */
@media (min-width: 768px) {
    .card-work-with {
        position: relative;
    }


    .bento-grid {
        grid-template-columns: repeat( 6, 1fr ); /* 6-column base for sizing flexibility */
    }
    /* Top Left Large Card */
    .card-large {
        grid-column: span 3;
        grid-row: span 2;
        padding: 20px;
    }
    /* Top Right Smaller Wide Cards */

    .image-container {
        height: 60%;
        margin: auto auto 0 auto;
        width: 80%;
    }




    .card-wide {
        grid-column: span 3;
        flex-direction: row; /* Text on left, image on right */
        align-items: center;
        padding: 20px;
    }

        .card-wide img {
            width: 40%;
            height: 100%;
            position: absolute;
            right: 0;
        }

        .card-wide > .text-content {
            width: 50%;
        }

    /* Bottom Three Cards */
    .card-tall {
        grid-column: span 2;
        position: relative;
        height: 400px;
    }

    .firstImg {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 85% !important;
    }

    /* 2nd child */
    .secondImg {
        position: absolute;
        bottom: 0;
        width: 85% !important;
    }

    /* last child */
    .card-tall:last-child img {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 85%;
    }
}
@media (min-width: 998px) {
    .card-tall {
        height: 472px;
    }
}

@media (max-width:767px) {
    .card-work-with h3 {
        font-size: 14px;
    }
    .bento-grid {
        grid-template-columns: repeat( 2, 1fr ); /* 2-column base for sizing flexibility */
    }
}

@media (max-width:400px) {
    .bento-grid {
        grid-template-columns: repeat( 1, 1fr ); /* 1-column base for sizing flexibility */
    }
}