.site-footer {
  background: #232a5e;
  min-height: 180px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 32px 60px;
  color: #fff;
  font-family: "GoogleSansCode", Arial, sans-serif;
  z-index: 10;
  margin-top: auto; /* let it push to bottom in flex layout */
  box-sizing: border-box;
}
.footer-center {
  grid-column: 2; /* centered area */
  display: flex;
  gap: 111px; /* spacing between the two columns */
  justify-content: center;
  transform: translateX(-156px); /* move both columns left */
}
.footer-center ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.footer-center a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  transition: color 0.2s;
}
.footer-center a:hover,
.footer-center a:focus {
  color: #d6ff85;
}
.footer-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: center; /* center the logo block horizontally */
  gap: 8px;
}
.footer-logo {
  width: 73px;
  height: auto;
  margin-bottom: 8px;
  max-width: 100%;
}
.footer-copyright {
  font-size: 15px;
  color: #bfc8f7;
  text-align: center; /* center under the logo */
}

@media (max-width: 1024px) {
  .site-footer {
    padding: 28px 36px;
  }
  .footer-logo {
    width: 144px; /* 3x tablet increase */
  }
  .footer-center {
    gap: 54px;
    transform: none; /* simplify on tablet */
    justify-content: center; /* center menu items */
  }
}
@media (max-width: 600px) {
  .site-footer {
    display: flex; /* stack on mobile */
    flex-direction: column;
    height: auto;
    padding: 24px 8px;
    align-items: center; /* center all items on mobile */
    gap: 18px;
  }
  .footer-center {
    justify-content: center; /* center menu items on mobile */
    gap: 24px;
    transform: none; /* do not shift on mobile */
  }
  .footer-right {
    align-items: center; /* center logo and copyright */
  }
  .footer-logo {
    width: 90px; /* 3x mobile increase */
  }
  .footer-copyright {
    font-size: 13px;
    text-align: center; /* center copyright text */
  }
}