@media screen and (max-width: 48rem) {

 body {
  	margin: 1rem;
  }
  header {
	margin-bottom: 1.5rem;
	width: 100%;
}

  .grid {
    grid-template-columns: repeat(12, 1fr);
    display: block;

  }
  .grid > .column {
  	width: 100%;
   	text-align: center;
    margin-bottom: 1rem;
  }

  .head {
  	display: block;
	font-size: 1.25rem;
	text-align: center;
  }

  .menu {
  	display: block;
  	margin-top: 2rem;
  	width: 100%;
  }
  .menu a{
  	padding: 0.5rem;
  	margin-left: 0rem;
  	border: var(--border);
  }

  #content {
	width: 100%;
  }

  .footer {
    width: 100%;
  }

.about-grid{
	display: block;
}

.teaser {
		height: 40rem;
	}

.small {
  margin-bottom: 1rem;
}

.project-gallery {
  columns: 1;
  margin-top: var(--margin-top);
}

main{
  display: block;
}

.contactform {
  width: 100%;
  margin-bottom: var(--margin-top);
}

.contactinfo {
  width: 100%;
  margin-bottom: var(--margin-top);
  }

.project_nav {
  visibility: hidden;
  }