#hero-faq {
  margin-top: 60.42px;
  color: white;
  background-color: var(--primary-color);
  padding: 16px 0;
  height: fit-content;
}

#hero-faq .title {
  font-size: var(--font-size-normal-2);
  font-weight: var(-font-weight-seminormal);
  margin-bottom: 10px;
}

#hero-faq .desc {
  font-size: var(--font-size-small-2);
}

#pertanyaan-umum {
  padding: 10px 0px 20px;
}

#pertanyaan-umum .sub-title,
#akun .sub-title,
#pertanyaan-pembayaran .sub-title,
#pertanyaan-aktivitas .sub-title {
  margin-bottom: 10px;
  text-align: start;
  font-weight: var(--font-weight-seminormal);
}

#pertanyaan-umum .shape-square,
#akun .shape-square,
#pertanyaan-pembayaran .shape-square,
#pertanyaan-aktivitas .shape-square {
  margin-top: 10px;
  border-radius: 4px;
}

#akun,
#pertanyaan-pembayaran,
#pertanyaan-aktivitas {
  padding: 0 0 20px;
}

/* tablet & desktop */
@media screen and (min-width: 768px) {
  .container-grid {
    display: grid;
    grid-template-columns: 6fr 6fr;
    grid-column-gap: 70px;
    margin-top: 40px;
  }

  #hero-faq {
    grid-row: 1;
    grid-column: 1;
    position: -webkit-sticky;
    position: sticky;
    top: 100.42px;
  }

  #hero-faq .container {
    margin-top: 0;
  }

  .container-grid .container {
    grid-row: 1;
    grid-column: 2;
    margin-top: 60.42px;
  }

  #pertanyaan-umum {
    padding-top: 0;
  }
}