.container_about {
    display: flex;
    flex-direction: column;
    padding: 3rem 1.5rem;
    gap: 4rem;
}

.container_presentation {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.container_presentation > .title_only_mobile {
    align-self: center;
}

.container_presentation > img {
    border-radius: 9px;
}

.container_text_button {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.title_only_computer {
    display: none;
}


.container_clients, .container_software {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.container_software_cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 1rem;
}

.software_card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 5px;
    border: 2px solid #0D0D0D;
    border-radius: 9px;
    padding: 1rem 0rem;
}

.software_card > svg{
    font-size: 2rem;
}

.container_clients_cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 1rem;
}

.client_card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 5px;
    border: 2px solid #0D0D0D;
    border-radius: 9px;
    padding: 1rem 0rem;
}

.client_card > img {
    border-radius: 50%;
    width: 120px;
}

.client_card > .name_client {
    font-weight: bold;
}

.client_card > .title_client {
    font-size: 0.8rem;
}

@media screen and (min-width: 768px){
    .container_about {
        padding: 3rem 5%;
    }

    .container_presentation {
        flex-direction: row-reverse;
        gap: 4rem;
    }

    .container_presentation > img {
        max-width: 340px;
        object-fit: cover;
    }

    .title_only_mobile {
        display: none;
    }

    .title_only_computer {
        display: block;
    }

    .container_software_cards {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .container_clients_cards {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media screen and (min-width: 1024px){
    .container_about {
        padding: 3rem 10%;
    }
}

@media screen and (min-width: 1440px) {
    .container_about {
        padding: 3rem 20%;
    }
}

@media screen and (min-width: 1920px){
    .container_about {
        padding: 3rem 0rem;
        width: 1700px;
        margin: 0 auto;
    }
}