.site-footer{
    background: #000; 
    color: rgba(255, 255, 255, 0.92); 
    border-top: 1px solid rgba(255, 255, 255, 0.08); 
    padding: 64px 0 0 ; 
}

.site-footer{
    display:grid; 
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px; 

    width: min(1200px, calc(100% - 48px)); 
    margin: 0 auto; 

}

/* Brand column */
.footer-brand img{
    width: 180px; 
    height: auto; 
    margin-bottom: 14px; 
}

.footer-column h3, .footer-column  h4{
    margin: 0 0 12px; 
    color: #fff; 
    letter-spacing: none; 
}

.footer-column p{
    margin: 0; 
    color: rgba(255, 255, 255, 0.72);
    max-width: 34ch; 
}

/* Lists */ 
footer-column ul{
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: grid; 
    gap: 10px; 
}

.footer-column a{
    color: rgba(255, 255, 255, 0.78);
    transition: color .2s ease; 
}

.footer-column a:hover{
    color: #fff; 
}

/* contact list */ 
.footer-contact li{
    color: rgba(255, 255, 255, 0.78);

}

/* Bottom bar */ 
.footer-bottom{
    grid-column: 1 / -1; 
    margin-top: 28px; 
    padding: 18px 0; 
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center; 
}

.footer-bottom p{
    margin: 0; 
    color: rgba(255, 255, 255, 0.65);
}

/* Responsive */
@media (max-width: 980px){
  .site-footer{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 52px;
  }
}

@media (max-width: 560px){
  .site-footer{
    grid-template-columns: 1fr;
    padding-top: 44px;
  }

  .footer-column p{
    max-width: 100%;
  }
}