@layer components {

  footer.site {
  	--footer-bg: #666;
  	--footer-ink:  #fff;
  }
  
  footer.site {
  	display: flex;
  	flex-wrap: wrap;
  }
  
  footer.site > section {
  	flex 0 0 30%;
  	width: 32%; 
  }
  
  footer.site > section h3 {
  	text-align: center;
  }
 
 footer.site li {
 	width: fit-content;
 	margin-inline: auto;
 } 
  
  footer.site li {
  	list-style-type: none;
  }
  
  footer.site p.copyright {
  	text-align: center;
  	width: 90%;
  	margin-inline: auto;
  	
  }
  
    footer.site > section a:link, footer.site > section a:visited {
  	text-decoration: none;
  	font-weight: var(--weight-medium);
  	color: var(--footer-ink)
  }
  
  footer.site { background: var(--footer-bg, var(--color-bg)); color: var(--footer-ink, var(--color-ink)); border-top: var(--hairline); padding: var(--space-4) 0;
  row-gap: 2rem; }
  
}

@media all and (max-width: 720px) {
	  footer.site > section {
	  	width: 90%;
	  	margin-inline: auto; 
  		text-align: left;
  }
  
  
}