.potential {
    margin-top: 15rem;
}

.potential > .title {
    color: var(--Dark-gray);
    
    font-size: 3.8rem;
    
    text-align: center;
}

.potential > .description {
    /* width: 40%; */
    
    text-align: center;
    
    margin: 2rem auto;
    
    font-size: 2rem;
    
    /* line-height: 3.5rem; */
    
    color: var(--Light-gray);
}

.potential > .informations {
    display: flex;
    justify-content: space-between;
    
    margin: 10rem auto;
}

.potential > .informations > .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33%;
}

.potential > .informations > .item > img {
    width: 5rem;
}

.potential > .informations > .item > .group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.potential > .informations > .item > .group > .subtitle {
    color: var(--Dark-gray);

    margin-top: 4rem;
    
    font-size: 2.8rem;
}

.last-sub {
    padding-top: 1rem;
}

/* Acredito que a descrição não está deixando eu alinhar os itens, pois cada descrição tem um tamanho diferente. 
Para resolver isso, podemos definir uma altura fixa para as descrições e usar o `display: flex` para alinhar os itens verticalmente. */

.potential > .informations > .item > .group > .description {
    color: var(--Light-gray);
    
    font-size: 1.5rem;

    line-height: 2.5rem;

    text-align: center;
}

.potential > .informations > .item > .group > .description.-first, 
.potential > .informations > .item > .group > .description.-second {
    width: 70%;
}

.potential > .informations > .item > .group > .description.-third {
    width: 75%;
    
    padding-top: .3rem;
}

@media (max-width: 480px) {
    .potential {
        margin-top: 20rem;
    }
    
    .potential > .title {  
        font-size: 3.3rem;
    }

    .potential > .description {
        width: 90%;
        
        font-size: 1.8rem;
    }

.potential > .informations {
        flex-direction: column;
        gap: 3rem;
    }

.potential > .informations > .item {
        width: 100%;
    }

.potential > .informations > .item > img {
        width: 6rem;
    }

.potential > .informations > .item > .group > .description.-first,
.potential > .informations > .item > .group > .description.-second,
.potential > .informations > .item > .group > .description.-third {
        width: 95%;
    }
}