footer{
  color:rgb(var(--footer-text-color));
  background-color:var(--footer-bg-color);
}
footer .content{
  display:grid;
  grid-template-columns:30% 70%;
  border-block:1px solid rgba(var(--footer-text-color), 8%);
  padding:3em 10%;
}
footer .content .store-brand{
  text-transform:uppercase;
}
footer .content .store-brand a{
  display:inline-flex;
  color:rgb(var(--footer-text-color));
}
footer .content .store-brand img{
  width:var(--footer-logo-width);
  -o-object-fit:contain;
     object-fit:contain;
}
footer .content .links-box{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-gap:var(--gap-lg);
  gap:var(--gap-lg);
  align-items:start;
}
footer .content .links-box .navigation{
  display:grid;
  grid-gap:var(--gap-lg);
  gap:var(--gap-lg);
}
footer .content .links-box .navigation .links{
  display:grid;
  grid-gap:var(--gap-lg);
  gap:var(--gap-lg);
}
footer .content .links-box .navigation .links a{
  width:-moz-fit-content;
  width:fit-content;
  color:rgba(var(--footer-text-color), 70%);
}
footer .content > .social-links{
  display:none;
}
footer .social-links{
  display:flex;
  align-items:center;
  gap:var(--gap-sm);
  margin-block-start:2em;
  margin-inline-start:-1.5rem;
}
footer .social-links a.yc-btn{
  color:rgb(var(--footer-text-color));
}
footer .copyright{
  padding:2em;
  font-size:var(--text-sm);
  text-align:center;
}

@media (max-width: 1024px){
  footer .content{
    grid-template-columns:1fr;
  }
  footer .content .store-brand{
    text-align:center;
    margin-bottom:3em;
  }
  footer .content .store-brand .social-links{
    display:none;
  }
  footer .content .links-box .navigation{
    text-align:center;
  }
  footer .content .links-box .navigation .links{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }
  footer .content > .social-links{
    display:flex;
    justify-content:center;
    margin-block-start:3em;
    margin-inline-start:0;
  }
}
@media (max-width: 768px){
  footer .content{
    padding:3em 1.5em;
  }
  footer .content .links-box{
    grid-template-columns:1fr;
    gap:var(--gap-2xl);
  }
  footer .content .links-box .navigation p{
    font-size:var(--text-lg);
  }
}