body{
  font-family: Graphik-Regular;
  font-size: 16px;
  line-height: 24px;
  background-color: #BBB;
}



h1 {
  font-family: Produkt-Extralight;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.3px;
  color: #000;  /* Black text for index page intro */
}
h1 .add-right-padding {
  margin-right:8px;
}
h1 strong {
  font-family: Graphik-Semibold;
  letter-spacing: -1.6px;
  margin-right: 16px;
}
p {
  color: #BBB;
}
p strong {
  color: #FFF;
}
a {
  text-decoration: none;
  color: #FFF;
}



.container {
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
}



.intro-container {
  position: relative;
}
.intro-positioning {
  position: absolute;
  bottom: 18;
  margin-right: 28px;
}
.intro-text-desktop { display: block; }
.intro-text-tablet { display: none; }
.intro-text-large-mobile { display: none; }
.intro-text-small-mobile { display: none; }



.main-content-alignment {
  margin-top: calc(52vh);
  margin-bottom: 30px;
}
.project-grid {
  display: grid;
  grid-template-areas:
    'one one two two two two'
    'three three three four four four'
    'five five six six seven seven';
  grid-gap: 1px;
  padding: 0px;
  width: 100%;
}
.project {
  background-color: #000;
  height: 360px;
  background-size: cover;
  background-position: center center;
  position: relative;
}
.project1 { grid-area: one; }
.project2 { grid-area: two; }
.project3 { grid-area: three; }
.project4 { grid-area: four; }
.project5 { grid-area: five; }
.project6 { grid-area: six; }
.project7 { grid-area: seven; }
.project8 { grid-area: eight; }
.project9 { grid-area: nine; }
.overlay {
  position: absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-color: rgba(0,0,0,0);
  cursor: pointer;
  overflow: hidden;
}
.overlay-text {
  position: absolute;
  bottom: 25px;
  left: 28px;
  text-align: left;
}



/* Intro text rag adjustments */

@media (max-width:1255px) {
  #index-intro-rag-adjust {
    margin-right: 100px;
  }
}
@media (max-width:1157px) {
  #index-intro-rag-adjust {
    margin-right: 28px;
  }
}




/* Responsive layout adjustments */

@media (max-width:1120px) {
  .intro-text-tablet { display: block; }
  .intro-text-desktop { display: none; }
  .project-grid {
  grid-template-areas:
    'one'
    'two'
    'three'
    'four'
    'five'
    'six'
    'seven'
  }
}
@media (max-width:600px) {
  .intro-text-large-mobile { display: block; }
  .intro-text-tablet { display: none; }
  .container {
    padding-left: 1px;
    padding-right: 1px;
  }
  .intro-positioning {
    margin-left: 27px;
    margin-right: 27px;
  }
  .main-content-alignment {
    margin-bottom: 1px;
  }
}
@media (max-width:480px) {
  .intro-text-small-mobile { display: block; }
  .intro-text-large-mobile { display: none; } 
  .project {
    height: 320px;
  }
}
@media (max-width:410px) {
  .project {
  height: 240px;
  }
}