body {
  font-size: 1.2em;
}

#app {
  width: 90%;
  margin: auto;
}


.grid {
	display: grid;
  width: 900px;
  height: 3000px;
  margin: auto;
  grid-template: repeat(30, 1fr) / repeat(12, 1fr);
}

img {
  max-width: 100%;
}




/* set 1: repurposed living */
.a {
	grid-area: 1 / 3 / 5 / 13;
}

.b {
	grid-area: 2 / 2 / 3 / 4;
}

.c {
	grid-area: 4 / 1 / 5 / 4;
}

/* set 2: angles */

.d {
	 grid-area: 5 / 1 / 12 / 7;
}

.e {
	grid-area: 7 / 6 / 9 / 10;
}

.f {
	grid-area: 9 / 7 / 10 / 10;
}

/* set 3: pattern play */

.g {
	grid-area: 11 / 3 / 16 / 13;
}

.h {
	grid-area: 12 / 2 / 14 / 5;
}

.i {
	grid-area: 14 / 1 / 15 / 4;
}

/* set 4: healing house */

.j {
	grid-area: 15 / 1/ 22 / 7;
}

.k {
	grid-area: 17 / 6 / 19 / 10;
}

.l {
	grid-area: 19 / 7 / 20 / 9;
}

/* set 5: curved perfection */

.m {
	grid-area: 21 / 3 / 27 / 13;
}

.n {
	grid-area: 22 / 2 / 24 / 5;
}

.o {
	grid-area: 24 / 1 / 26 / 4;
}

.headLine {
  margin-top: 5vh;
  height: 20vh;
  text-align: center;
  font-family: 'Roboto Slab', serif;
  font-weight: 300;
  font-size: 120%;
  margin-bottom: 10vh;
}

.box {
  font-family: 'Roboto Slab', serif;
  font-size: 90%;
}

.title {
  font-weight: 700;
  font-size: 180%;
  font-family: 'Playfair Display', serif;
  text-decoration: underline;
}

/* media queries */ 

@media (min-width: 1150px) {
  #app {
    width: 80%;
    margin: auto;
  }
}

@media (max-width: 650px) {
  .grid {

  }
  
  .title {
    width: 65%;
    font-size: 120%;
  }
}