footer {
  position: relative;
  display: grid;
  grid-template-columns: min-content auto min-content;
  grid-template-areas: "icons links logo";
  height: 80px;
  user-select: none;
}

/* ICONS */

footer .icons {
  grid-area: icons;
  display: grid;
  grid-template-columns: 30px 30px 30px 30px;
  grid-template-rows: 100%;
  align-self: center;
  padding-left: 20px;
}

footer .icons img {
  display: block;
  height: 20px;
}

/* LINKS */

footer .links {
  grid-area: links;
  align-self: center;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
  font-family: SuisseIntl, Helvetica, Arial, sans-serif;
  font-weight: 400;
}

footer .links strong {
  display: none;
}

footer .links a {
  text-decoration: none;
  color: #000;
}

footer .links a:after {
  content: " | ";
}

footer .links a:last-child:after {
  content: "";
}

/* LOGO */

footer .logo {
  grid-area: logo;
  align-self: center;
  padding-right: 20px;
  padding-bottom: 5px;
}

footer .logo img {
  display: inline;
  height: 40px;
}

/* MEDIA */
@media only screen and (max-width: 600px) {
  footer {
    grid-template-columns: 1fr min-content;
    grid-template-areas:
      "links links"
      "icons logo";
    height: auto;
  }

  footer .links {
    line-height: 30px;
    padding: 20px;
    text-align: left;
  }

  footer .links a {
    display: block;
  }

  footer .links a:after {
    content: "";
  }

  footer .links strong {
    display: block;
  }

  footer .icons {
    padding: 20px;
  }

  footer .logo {
    padding: 20px 20px 20px 10px;
  }
}