.frame {
  container-type: inline-size;
  --u: calc(100cqw / 1920);
}
.contact {
  position: absolute;
  z-index: 3;
  left: calc(1560 * var(--u));
  top: calc((var(--y) + 70) * var(--u));
  width: calc(360 * var(--u));
  height: calc(280 * var(--u));
  background: #333;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: calc(20.8 * var(--u));
  font-weight: 400;
  line-height: calc(44 * var(--u));
}
.contact a {
  position: absolute;
  color: #fff;
  text-decoration: none;
}
.contact .line {
  left: calc(16 * var(--u));
  top: calc((var(--i) * 44 - 1.7) * var(--u));
  white-space: nowrap;
}
.contact .line:hover { text-decoration: underline; }
.contact .social {
  position: absolute;
  left: 0;
  top: calc(217 * var(--u));
  width: calc(210 * var(--u));
  height: calc(55 * var(--u));
  background: url("assets/footer-social.png") 0 0 / 100% 100% no-repeat;
}
.contact .social a {
  top: calc(3 * var(--u));
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  border-radius: 50%;
  font-size: 0;
}
.contact .social a:nth-child(1) { left: calc(10 * var(--u)); }
.contact .social a:nth-child(2) { left: calc(80 * var(--u)); }
.contact .social a:nth-child(3) { left: calc(150 * var(--u)); }
.contact a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.foot-menu {
  position: absolute;
  z-index: 4;
  left: calc(905 * var(--u));
  top: calc(var(--fy) * var(--u));
  margin: 0;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: calc(21 * var(--u));
  font-weight: 400;
  line-height: 1;
}
.foot-menu a {
  display: flex;
  align-items: flex-start;
  height: calc(44 * var(--u));
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.foot-menu a:hover { text-decoration: underline; }
.foot-menu a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}