footer {
  display: grid;
  background: var(--lttrshop-text-color);
  /* The purpose of this is to achieve a vertical line that divides .links and .contact, min-content + space between individual links */
  grid-auto-columns: min-content min-content auto;
  color: var(--lttrshop-background-color);
  align-items: center;
  font-size: var(--lttrshop-txt-xs);
  line-height: var(--lttrshop-line-xs);
  padding: var(--page-padding);
  white-space: nowrap;
}

footer a {
    color: var(--lttrshop-background-color);
    text-decoration: underline;
}

footer a:hover {
    opacity: var(--gamma);
}

footer ul {
  margin-top: var(--lttrshop-space-xl);
  margin-bottom: var(--lttrshop-space-xl);
}

footer ul li {
  display: inline-block;
  margin-right: var(--lttrshop-space-l);
}

footer ul li a {
  padding: var(--lttrshop-space-s) 0;
}

footer .contact {
  grid-area: contact;
}

footer .meta {
  grid-area: meta;
}

footer .links {
  grid-area: links;
}

footer .secure-connection:before {
    content: "🔒";
    font-family: var(--lttrshop-font-family-icons);
    font-weight: var(--lttrshop-font-weight-icons);
    margin-right: var(--lttrshop-space-xs);
    vertical-align: middle;
    font-size: var(--lttrshop-txt-icon);
}

footer .lttrshop-logo {
    font-family: var(--lttrshop-font-family-lttrshop-logo);
    font-weight: var(--lttrshop-font-weight-lttrshop-logo);
}

footer a.lttrshop-logo {
    text-decoration: none;
}

.-lttrLogoWhite
{
    color: #ffffff;
}

.-lttrLogoBlack
{
    color: #000000;
}

.-lttrLogoRed
{
    color: #ff0000;
}

@media screen and (max-width: 599px) {
  footer .links {
    margin-bottom: var(--lttrshop-space-l);
  }

  footer .meta {
    margin-left: 0;
    margin-bottom: var(--lttrshop-space-m);
  }

  footer .contact {
    margin-left: var(--lttrshop-space-xxl);
  }

  footer ul li {
    display: block;
    text-align: left;
    margin: 0 0 var(--lttrshop-space-xs) 0;
  }

  footer ul {
    margin-top: var(--lttrshop-space-m);
  }

  footer {
    grid-template-areas: "links contact" "links ." "meta meta";
    position: -webkit-sticky;
    position: sticky;
  }
}

@media screen and (min-width: 600px) and (max-width: 900px) {
  footer .meta {
    margin-left: 0;
    margin-bottom: var(--lttrshop-space-m);
  }

  footer .contact {
    margin-left: var(--lttrshop-space-xxl);
  }

  footer ul li {
    display: block;
    text-align: left;
    margin: 0;
  }

  footer ul {
    margin-top: var(--lttrshop-space-m);
  }

  footer {
    grid-template-areas: "links contact" "links ." "meta meta";
  }
}

@media screen and (min-width: 900px) {
  footer .links {
    grid-column-start: 1;
  }

  footer .links:after {
    content: "";
    border-right: var(--outline) solid var(--lttrshop-background-color);
    opacity: var(--alpha);
    padding: var(--lttrshop-space-xs) 0;
  }

  footer .meta {
    grid-column-start: 5;
    grid-column-end: 6;
  }

  footer .contact {
    grid-column-start: 2;
    margin-left: var(--lttrshop-space-l);
  }
}