:root {
	--map-padding: 2rem;
	--map-aspect-ratio: 0.5625;
  }
  
  #contact {
	width: 100%;
  }
  
  #contact-title {
	width: 100%;
	z-index: 2;
	background-color: var(--background-primary);
	padding-top: 3rem;
  }
  
  #contact-info {
	padding: 1rem;
  }
  
  .contact {
	width: 100%;
	cursor: pointer;
  }
  
  .contact a {
	display: flex;
	align-items: center;
	padding: 0.5rem;
	font-size: 100%;
	font-weight: 700;
	color: var(--text-primary);
  }
  
  .contact img {
	width: 2rem;
	margin-right: 0.5rem;
  }
  
  .contact h3 {
	margin: 0;
  }
  
  #map {
	width: calc(100% - var(--map-padding));
	height: calc(100vw * var(--map-aspect-ratio));
  }
  
  #map iframe {
	width: 100%;
	height: 100%;
  }
  
  @media only screen and (min-width: 1364px) {
	#map {
	  width: 40%;
	  height: 25vw;
	}
  }