.intro-content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns of equal width */
    grid-template-rows: auto auto;  /* Rows adjust to content height */
    grid-template-areas:
        "text image"
        "what image"; /* Image spans two rows */
    gap: 20px;
    padding: 20px;
}

.intro-text {
    grid-area: text;
    margin-top: 0;
}

.intro-what-we-do {
    grid-area: what;
    margin-top: 0; /* Remove margin-top on large screens */
}

.intro-image {
    grid-area: image;
    text-align: center;
}

.intro-image img {
    width: 100%;
    height: auto;
    max-width: 300px;
    border-radius: 50px;
}

/* Mobile layout adjustments */
@media (max-width: 768px) {
    .intro-content {
        grid-template-columns: 1fr; /* Single-column layout */
        grid-template-areas:
            "text"
            "image"
            "what"; /* Stack elements vertically */
        text-align: center;
        align-items: center; /* Center content */
    }

    .intro-text,
    .intro-image,
    .intro-what-we-do {
        max-width: 100%; /* Full width on mobile */
    }

    .intro-text,
    .intro-image,
    .intro-what-we-do {
        margin-top: 20px; /* Add space between sections */
    }

    .intro-text {
        margin-top: 0; /* Remove top margin for the first element */
    }
}