.scroll-word-sync{
  margin-bottom: 98px;
}
.container-scroll-word-sync{
  max-width: 1200px !important;
  padding-top: 120px ;
  padding-bottom: 0px ;
      width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}
@media (max-width:576px){
  .container-scroll-word-sync h2{
  margin-bottom: 32px;
  padding-top: 0px !important;
  font-size: 24px !important;
}

.container-scroll-word-sync{
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

}

.scroll-word-sync span {
  color: rgba(188,163,159,1);
  /* opacity: 0.2;
  filter: blur(4px);
  transform: translateY(10px); */
  transition: 
    color 0.5s ease,
    opacity 0.5s ease,
    transform 0.5s ease,
    filter 0.5s ease;

  font-size: 2.5rem;
  font-weight: 700;
}

.scroll-word-sync span.revealed {
  color: rgba(81,37,32,1);
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Mobile */
@media (max-width:768px){

.scroll-word-sync span{
  font-size:1.2rem;
}

}



 /* 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;
  }
}