.scroll-word-sync span {
  color: rgba(188, 163, 159, 1); /* Initial faded color */
  transition: color 0.3s ease;
  font-size: 2.5rem;
  font-weight: 700;
}

.scroll-word-sync span.revealed {
  color: rgba(81, 37, 32, 1); /* Final active color */
  font-weight: 700;
}

/* Responsive */
@media screen and (max-width: 768px) {
.scroll-word-sync span {

  font-size: 1.2rem;
  font-weight: 600;
}
}



 /* grid system */
.thin-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 100 !important;
}

.parent {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: 1fr 2fr repeat(2, 0.5fr) 2fr 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 5 / 5; }
.div2 { grid-area: 3 / 5 / 7 / 9; }
.div3 { grid-area: 1 / 5 / 3 / 7; }
.div4 { grid-area: 1 / 7 / 3 / 9; }
.div5 { grid-area: 5 / 1 / 7 / 3; }
.div6 { grid-area: 5 / 3 / 7 / 5; }


@media (max-width: 768px) {
  .parent {
    display: flex;
    flex-direction: column;
  }

  .parent > div {
    width: 100%;
    height: auto;
  }

  .div1, .div2, .div3, .div4, .div5, .div6 {
    grid-area: unset !important; /* disables grid placement on mobile */
    /* padding: 20px !important; */
  }

  .div2 img,
  .div4 img,
  .div5 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
}