Revision:
<main>
<!-- Content -->
</main>
<footer>
<div class="addr">
<h1 class="logo">text/image</h1>
<h2>contact details</h2>
<address> somewhere: number, street, city, country<br>
<a class="btn" href="mailto:example@gmail.com">send us an email</a>
</address>
</div>
<ul class="nav">
<li class="nav__item">
<h2 class="nav__title">media</h2>
<ul class="nav__ul">
<li><a href="#">online</a></li>
<li><a href="#">print</a></li>
<li><a href="#">alternative ads</a></li>
</ul>
</li>
<li class="nav__item nav__item--extra">
<h2 class="nav__title">technology</h2>
<ul class="nav__ul nav__ul--extra">
<li><a href="#">hardware design</a></li>
<li><a href="#">software design</a></li>
<li><a href="#">digital signage</a></li>
<li><a href="#">automation</a></li>
<li><a href="#">artificial intelligence</a></li>
<li><a href="#">IoT</a></li>
</ul>
</li>
<li class="nav__item">
<h2 class="nav__title">legal</h2>
<ul class="nav__ul">
<li><a href="#">privacy policy</a></li>
<li><a href="#">terms of use</a></li>
<li><a href="#">sitemap</a></li>
</ul>
</li>
</ul>
<div class="legal"><p>© 2019. All rights reserved.</p></div>
</footer>
<style>
footer {display: flex;flex-flow: row wrap; width: 94vw; height: 40vh; color: black; position:relative; background-image: repeating-linear-gradient(50deg, black, yellow, red);
padding-left: 4vw;}
footer > * {flex: 1 35%;}
.addr {margin-bottom: 1vw; }
.logo {font-family: Helvetica, sans-serif; font-weight: 400; text-transform: lowercase; font-size: 1.25vw;}
.addr, h2 {margin-top: 1vw; font-size: 1.25vw;font-weight: 400;}
.nav__title { font-weight: 400; font-size: 1.5vw; color: darkblue;}
footer address {font-style: normal; color: darkgray;}
.btn {display: flex; align-items: center; justify-content: center; height: 3vw; max-width: max-content; background-color:darkgreen;border-radius: 1vw; color: darkblue;
line-height: 0; margin: 0.6vw 0; font-size: 1.25vw; padding: 1.3vw;}
footer ul {list-style: none;padding-left: 0;}
footer li {line-height: 1.5vw;}
footer a {text-decoration: none;}
.nav {display: flex; flex-flow: row nowrap;}
.nav > * {flex: 1 35%;margin-right: 2vw;}
.nav__ul a {color: black;}
.nav__ul--extra {column-count: 2; width: 20vw; column-gap: 0.2vw; }
.legal {display: flex; flex-wrap: wrap;color: darkgray;}
@media screen and (min-width: 24.375em) {
.legal .legal__links {margin-left: auto;}
}
@media screen and (min-width: 40.375em) {
.footer__nav > * {flex: 1;}
.nav__item--extra {flex-grow: 2;}
.footer__addr {flex: 1 0vw;}
.footer__nav { flex: 2 0vw;}
}
</style>