.contact{ margin-bottom: 30px;}
.contact-map{ display: block; height: 300px; filter: saturate(0.6);   overflow: hidden; margin-top: 20px}
.contact-text p{ text-align: left; margin: 5px 0; font-size: 16px}
.contact-text p {display: block; margin-left: 20px;}
.contact-text p:first-child, .contact-text p:last-child { margin: 10px 0; font-size: 18px; font-weight: bold; color: var(--color3)}

@media only screen and (min-width: 768px) {
.contact{width: calc(50% - 15px); display: flex; flex-direction: column;  }
    .contact-text{ order:2; margin-top: 20px;}

}

@media only screen and (min-width: 1280px) {

    .contact-text p{font-size: 18px}
    .contact-text p:first-child, .contact-text p:last-child { font-size: 22px;}
    .contact-map{ display: block; height: 400px;}
    .contact{width: calc(50% - 25px);   }

}