section.content-do {
    max-width: 1120px;
    margin: 12rem auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

section.content-do h1 {
    color: var(--gray-text);
    font-size: 2.5rem;
}

section.content-do p {
    margin-top: 2rem;
    color: var(--gray-text);
    font-size: 1.2rem;
}

div.content-do-img {
    display: flex;
    margin-left: 3rem;
}

div.content-do-img img {
    position: relative;
    right: 4rem;
    width: 15rem;
    margin-top: -1.5rem;
    z-index: 1;
}

div.square {
    position: absolute;
    background: var(--purple-text);
    width: 23rem;
    height: 14rem;
}

@media only screen and (max-width: 1024px) {
    section.content-do {
        margin: 4rem auto;
        grid-template-columns: 1fr;
        padding: 8rem;
    }

    section.content-do h1 {
        font-size: 3rem;
        text-align: center;
    }

    section.content-do p {
        font-size: 1.8rem;
    }

    div.content-do-img {
        display: flex;
        justify-content: center;
    }

    div.content-do-img img {
        right: 9rem;
    }
}

@media only screen and (max-width: 600px) {
    section.content-do {
        grid-template-columns: 1fr;
        padding: 3rem;
        margin-top: 4rem;
    }

    section.content-do h1 {
        text-align: center;
    }    
    
    div.content-do-img img {
        right: 3rem;
    }

    div.square {
        width: 21.2rem;
    }

    div.value img {
        width: 5rem;
    }

    div.value h1 {
        font-size: 2.5rem;
    }

    div.value p {
        font-size: 1.5rem;
    }
}