.masonry .build {
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--primary-color);
}

.masonry .shade {
  position: relative;
  width: 100%;
  height: 100%;

  grid-template-columns: 0.3fr 2fr 1fr !important;
  grid-template-rows: 1fr 2fr 2fr !important;

  background-color: rgba(0, 0, 0, 0.568);

  padding: 0;
}

.img-masonry {
  position: absolute;
  width: 100%;
  height: 100%;

  background-image: url(../Images/Our\ Philosophy\ [The\ Verdant\ Spire].png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.masonry .shade .filler {
  border-style: solid;
  border-width: 0.5px;
  border-color: var(--faded-background-color);
}

.masonry .build .shade .box {
  grid-column: 2/3;
  grid-row: 2/3;
}

.masonry .build .shade .box {
  color: var(--background-color);
}

.masonry .build .shade .box-nav {
  grid-column: 3/3;
  grid-row: 3/3;
}

.masonry .build .shade div {
  background-color: transparent;
}

.masonry .build .shade div h1 {
  opacity: 0.9;
}

.masonry .build .shade div p {
  opacity: 0.9;
}

.masonry .build .box .address{
  color: var(--accent-color);
}
.box{
  position: relative;
}

.project-name{
  font-size: var(--responsive-large-text-size);
}

.box .address{
  /* align-self: flex-start; */
  position: absolute;
  bottom: 24px;
  left: 24px;
}

.musuem .img-masonry{
  background-image: url(../Images/Our\ Philosophy\ [The\ Prism\ Musem].png);
  background-position: center;
}

.research .img-masonry{
  background-image: url(../Images/Our\ Philosophy\ [The\ Archetype].png);
  background-position: center;
}

@media (max-width: 800px) {
  .masonry .build .shade {
    display: grid;
    grid-template-columns: 90% 10% !important;
    grid-template-rows: 5% 85% 10% !important;
  }

  .img-masonry {
    background-image: url(../Images/The\ Verdant\ Spire\ [Mobile\ version].png);
  }

  .masonry .build .shade .box {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .masonry .build .shade .box-nav img {
    bottom: 100%;
    left: 10%;

    /* transform: translate(-10%, -10%); */
  }

  .masonry .build .shade .box-nav {
    grid-column: 1/2;
    grid-row: 3/3;
    align-items: flex-end;
  }

  .research .box .address{
    width: 50%;
  }

  .musuem .img-masonry{
    background-image: url(../Images/Mobile\ Images.png);
  }

  .research .img-masonry{
    background-image: url(../Images/Mobile\ Images\ [Archetype].png);
  }
}