.contactContent {
    background-image: url("../img/contact/MailWithGradient.webp"); /* Changed from /WEB/IMG/... */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contact-text p {
    color: white;
}

.contactContent div:nth-of-type(2) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* The 28px it inherits from .text-bubble-img-presentation offsets an
       absolutely positioned box, so the card was sitting 28px below and right
       of the centre this rule is aiming for — enough to hang over the footer. */
    margin: 0;
    width: min(50vw, 60vh);
    height: auto;
    min-width: 450px;
}
@media screen and (max-height:  768px) {
    
    .contactContent div:nth-of-type(2){
        position:relative;
        transform: translate(0%, 0%);
        left: 0%;
        /* Back in flow here, so the spacing the desktop rule zeroed out is
           wanted again. */
        margin: 28px 0;
        min-width: 350px;
        .bubble-hover{
            margin: 10px;
        }
        h1{
            font-size: 28px;
        }
    }   
    
}
@media screen and (max-width: 768px) {

    .contactContent div:nth-of-type(2){
        position:relative;
        transform: translate(0%, 0%);
        /* top: 50%; */
        left: 0%;
        width: 80vw;

        min-width: 0px;
        padding: 28px 0px;
        h1{
            font-size: 32px;
        }
    }
    .back-img-presentation{
        height: auto;
     
    }
    .round-img-in-bubble{
        width: 75%;
    }
    .text-bubble-img-presentation2 p{
        text-align: center;
    }
}