.site-footer {
  --control-hover-fill: var(--ink);
  --control-hover-text: #fff;
}

.footer-contact,
.footer-navigation {
  gap: 31px;
  font-size: var(--control-size);
  font-weight: var(--control-weight);
  line-height: var(--control-line);
  letter-spacing: var(--control-tracking);
}

.footer-contact a.motion-control,
.footer-navigation a.motion-control {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 20px;
  margin: 0;
  border: 0;
  border-radius: var(--control-radius);
  text-decoration: none;
}

.footer-contact a:hover,
.footer-navigation a:hover { text-decoration: none; }
.site-footer .footer-label { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: .05em; }
.footer-contact-links { display: grid; justify-items: start; gap: 3px; margin-left: -20px; }
.footer-navigation-links { display: flex; flex-wrap: wrap; gap: 0 16px; margin-left: -20px; }

.footer-brand { width: fit-content; gap: 0; }
.footer-brand img { width: 64px; height: 64px; flex-basis: 64px; }

.back-to-top {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--control-radius);
  color: var(--ink);
  background: var(--lime);
}

.back-to-top-icon {
  display: block;
  width: 18px;
  height: 21px;
  background: currentColor;
  mask: url('./assets/footer-arrow-up.svg') center / contain no-repeat;
}

.footer-socials { display: flex; align-items: center; gap: 28px; margin-left: -9px; }
.footer-social { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); text-decoration: none; }
.footer-social-icon { display: block; width: 26px; height: 26px; background: currentColor; mask: var(--social-icon) center / contain no-repeat; }
.footer-social-icon--instagram { --social-icon: url('./assets/social-instagram.svg'); }
.footer-social-icon--dribbble { --social-icon: url('./assets/social-dribbble.svg'); }
.footer-social-icon--x { --social-icon: url('./assets/social-x.svg'); }

@media (min-width: 761px) {
  .site-footer { padding-block: 64px; }
  .footer-grid {
    grid-template-columns: minmax(0, 10fr) minmax(0, 13fr) 48px;
    grid-template-rows: 235px 95px;
    align-content: start;
    gap: 0 24px;
    min-height: 430px;
    padding: 0;
    border: 0;
  }
  .footer-brand { grid-column: 1; grid-row: 1; }
  .footer-contact { grid-column: 2; grid-row: 1; align-self: start; }
  .footer-navigation { grid-column: 2; grid-row: 2; align-self: start; }
  .back-to-top { grid-column: 3; grid-row: 1; }
  .footer-socials { grid-column: 1; grid-row: 2; align-self: end; }
}