footer {
  margin-top: auto;

  padding: 20px 0 0 0;
  width: 100%;

  font-family: "Epilogue", Helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.7em;
}

div.grid-container {
  display: grid;
  grid-template-areas:
    "linkedin insta"
    "agb agb"
    "datenschutz datenschutz"
    "impressum impressum"
    "copyright copyright";
  gap: 10px;
  padding: 10px;
  text-align: center;
}

.grid-container a.pleft {
  padding-right: 40%;
}

.grid-container a.pright {
  padding-left: 40%;
}
.itemlinkedin {
  grid-area: linkedin;
}
.iteminsta {
  grid-area: insta;
}
.itemagb {
  grid-area: agb;
}
.itemdatenschutz {
  grid-area: datenschutz;
}
.itemimpressum {
  grid-area: impressum;
}
.itemcopyright {
  grid-area: copyright;
}

.grid-container a,
.grid-container a:active,
.grid-container a:visited,
.grid-container div {
  color: var(--black);
  border-top: solid 2px var(--white);
  padding: 3px 10px;
  text-decoration: none;
}

.grid-container a:hover {
  color: var(--black);
  border-top: solid 2px var(--black);
}

/* 48em = 768px */

@media (min-width: 48em) {
  footer {
    margin: auto auto 0 auto;
  }

  div.grid-container {
    display: grid;
    grid-template-areas: "linkedin insta agb datenschutz impressum copyright";
    justify-content: flex-end;
    gap: 10px;
    padding: 10px;
    text-align: center;
  }

  .grid-container a.pleft {
    padding-right: inherit;
  }

  .grid-container a.pright {
    padding-left: inherit;
  }
}