*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  background:white;
  color:#111;
}

.nav{
  display:flex;
  justify-content:space-between;
  padding:30px 60px;
  position:fixed;
  width:100%;
  background:white;
}

.nav a{
  margin-left:30px;
  text-decoration:none;
  color:#111;
  font-size:14px;
}

.hero{
  height:100vh;
  display:flex;
  align-items:center;
  padding:0 60px;
}

.hero h1{
  font-size:64px;
  font-weight:300;
}

.projects{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding:120px 60px;
}

.card{
  height:520px;
  display:flex;
  align-items:flex-end;
  padding:20px;
  font-size:18px;
  color:white;
  background-size:cover;
  background-position:center;
}

/* HIGH QUALITY STOCK IMAGES */
.decking{
  background-image:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)),
  url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=1200');
}

.sauna{
  background-image:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)),
  url('https://images.unsplash.com/photo-1582582429416-ef0e1a3a2c79?q=80&w=1200');
}

.roof{
  background-image:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)),
  url('https://images.unsplash.com/photo-1502005229762-cf1b2da7c5d6?q=80&w=1200');
}

.facade{
  background-image:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)),
  url('https://images.unsplash.com/photo-1505842465776-3d90f616310d?q=80&w=1200');
}

.about{
  padding:120px 60px;
  max-width:700px;
}

.contact{
  padding:60px 60px 20px 60px;
}

footer{
  padding:20px 60px 60px 60px;
  font-size:12px;
}

@media(max-width:900px){
  .projects{grid-template-columns:1fr 1fr;}
}

@media(max-width:600px){
  .projects{grid-template-columns:1fr;}
  .hero h1{font-size:36px;}
}