.container-contact{
    display: flex;
    justify-content: center;
}

.contact-img{
    text-align: center;
    margin: auto 0;
}

.contact-img__img{
    margin: 50px;
    width: 60%;
}

.contact-icons{
    align-self: center;
    width: 30%;

    display: grid;
    grid-gap: 1.25rem;
    grid-auto-rows: 9.375rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
}

.contact-icons__div{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #eeecec;
    border-radius: 0.625rem;
}

.contact-icons__div-a{
    text-decoration: none;
    font-size: 4.375rem;
    color: #2f2e41;
}

.contact-icons__div-a:hover{
    color: var(--purple-dark);
    transition: color ease-in-out .3s;
}

@media screen and (max-width: 765px) {

    .container-contact{
        flex-wrap: wrap;
    }

    .container-contact{
        width: 100%;
        display: flex;
        margin: 0;
        justify-content: center;
    }

    .contact-icons{
        width: 100%;
        grid-gap: 0.625rem;
        grid-auto-flow: row;
        grid-auto-rows: 8.125rem;
    }

    .contact-img__img {
        margin: 1.5625rem auto;
    }
    
}

@media screen and (max-width: 350px) {

    .contact-icons{
        width: 100%;
        grid-auto-rows: 100px;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 100px), 1fr));
    }

    .contact-icons__div-a{
        font-size: 2.7rem;
    }

}