.philosophy {
  position: relative;
  background-color: var(--faded-primary-color);
}

.build {
  position: relative;
  width: 100%;
  min-height: 100vh;

  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;

  gap: 1px;
}

.filler {
  background-color: var(--background-color);
}

.box {
  color: var(--primary-color);

  width: 100%;
  height: 100%;

  display: flex;
  /* flex-direction: column; */

  justify-content: space-between;
  align-items: stretch;

  padding: 24px;

  grid-column: 2/3;
  grid-row: 2/3;
}

.box p {
  width: clamp(300px, 10vw, 5000px);
  position: relative;
  align-self: flex-end;
}

.box-nav {
  grid-column: 1/2;
  grid-row: 3/3;
}

.box-nav img {
  position: relative;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
}

@media (max-width: 800px) {
  .build {
    display: grid;

    grid-template-columns: 90% 10%;
    grid-template-rows: 5% 85% 10%;

  }

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

  .box-nav img{
    bottom: 100%;
    left: 10%;
  
    /* transform: translate(-10%, -10%); */
  }

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