.dante {

    color: rgb(31, 31, 31);
    background-color: #f5f5f5;
    padding: 1rem 0 0 0;
    height: 380px;
    /*height: 500px;*/
}

.dante .title {
    color: #FFF;
    font-size: 3.6rem;
    /*color: inherit;*/
     margin: 1.6rem 0 0 0;
    font-weight: 700;
}


.dante__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.dante__item span {
    /*text-transform: uppercase;*/
    color: #FFF;
    font-size: 2.5rem; 
 }


.dante__item p {
    color: #FFF;
    font-size: 2rem;
}


.dante__item.left {
    animation-duration: 2s;
    animation-name: slideInleft;
}

.dante__avatar img {
    width: 100%;
}

@media screen and (max-width: 749px) {
    .dante__item.left {
        order: 2;
    }
    .dante .title {
        font-size: 2rem;
    }
    .dante__item.right {
        order: 1;
    }  
    .dante__avatar img {
        max-width: 400px;
        border-radius: 5%;
    }
}

/* flex-shrink, flex-grow voir MDN*/
@media screen and (min-width: 750px) {
    .dante__item {
        flex: 1 0 50%;
        text-align: left;
    }

    .dante__item.left {
        align-items: flex-start;
    }
 
    .dante__avatar img {
        max-width: 325px;
        border-radius: 50%;
    }
   
}