footer { padding: 58px 0 42px; }

.footer-inner {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(210px, .52fr) minmax(650px, 1.48fr);
  align-items: center;
  gap: clamp(50px, 8vw, 120px);
}

.footer-intro { display: flex; align-items: center; gap: 34px; }
.footer-intro .follow { margin: 0; }
.footer-intro .follow > div { gap: 28px; }
.footer-intro .follow a { display: grid; place-items: center; width: 38px; height: 38px; }
.footer-intro .follow svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-intro .follow svg .icon-dot { fill: currentColor; stroke: none; }
.footer-intro .follow svg .play { fill: currentColor; stroke: none; }

.contact-form {
  display: grid;
  grid-template-columns: minmax(230px, .85fr) minmax(320px, 1.15fr);
  grid-template-areas:
    "heading heading"
    "name comment"
    "email comment"
    "phone comment"
    "submit submit";
  gap: 18px 20px;
  padding-left: clamp(28px, 4vw, 60px);
  border-left: 1px solid rgba(255,255,255,.18);
}

.form-heading { grid-area: heading; margin-bottom: 2px; }
.form-heading .label { margin-bottom: 4px; }
.form-heading h2 { margin: 0; font-size: 2.2rem; font-weight: 600; text-transform: uppercase; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-comment { grid-column: 1 / -1; }
.field-name { grid-area: name; }.field-email { grid-area: email; }.field-phone { grid-area: phone; }
.field-comment { grid-area: comment; }
.field label { color: #d6d6d6; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.field input,.field textarea {
  width: 100%;
  border: 1px solid #3a3c3e;
  border-radius: 0;
  background: rgba(0,0,0,.34);
  color: #fff;
  font: 1rem Inter, sans-serif;
  padding: 12px 13px;
  outline: none;
  transition: border-color .2s, background .2s;
}
.field textarea { resize: vertical; min-height: 100%; height: 100%; }
.field input:focus,.field textarea:focus { border-color: var(--red); background: rgba(0,0,0,.55); }
.submit-btn { grid-area: submit; justify-self: end; min-width: 185px; margin-top: 5px; background: transparent; }

.site-credits {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.2);
  color: #aeb0b2;
  font-family: Inter, sans-serif;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-credits a { color: #fff; text-decoration: none; transition: color .2s; }
.site-credits a:hover { color: var(--red); }

@media (max-width: 991px) {
  .footer-inner { grid-template-columns: 1fr; gap: 45px; }
  .footer-intro { justify-content: flex-start; }
  .contact-form { padding: 38px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
}

@media (max-width: 575px) {
  footer { padding-top: 45px; }
  .footer-intro { align-items: flex-start; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-form { grid-template-areas:"heading" "name" "email" "phone" "comment" "submit"; }
  .form-heading,.field-comment,.submit-btn { grid-column: 1; }
  .field textarea { min-height: 130px; }
  .submit-btn { justify-self: stretch; }
  .site-credits { align-items: flex-start; gap: 10px; margin-top: 38px; font-size: .62rem; }
}