@media (max-width: 850px) {
  .terms-page-main {
    .terms-page-container {
      .terms-page-sidebar {
        display: none;
      }
    }
  }
}

@media (max-width: 1024px) {
  .terms-page-main {
    .terms-page-container {
      gap: 4rem;
    }
  }
}

.terms-page-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;

  .terms-page-head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    justify-content: center;
    background: linear-gradient(120deg, #ffffff 0%, #fc9a3f 100%);
    height: 100%;
    width: 100%;
    padding: 5rem 3rem 3rem;
  }

  .terms-page-container {
    display: flex;
    flex-direction: row;
    gap: 8rem;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    padding: 2rem 3rem;

    .date {
      margin-bottom: 0.8rem;
    }

    .terms-page-sidebar {
      position: sticky;
      top: 70px;
      flex: 0 0 250px;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      align-items: flex-start;
      justify-content: flex-start;
      border-left: 1px solid var(--gray-3);
      padding-left: 1.5rem;
      height: calc(100vh - 80px);
      overflow-y: auto;
      z-index: 10;
      padding-top: 2rem;

      p {
        padding-bottom: 1rem;
      }

      ul {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
        justify-content: flex-start;
        list-style: none;
        position: relative;

        li {
          a {
            font-size: var(--small);
            text-decoration: none;
            color: var(--gray);
            transition: all 0.2s ease;
            border-left: 2px solid transparent;
          }

          a:hover,
          a.active {
            color: var(--purple-stroke);
            font-weight: 600;
          }
        }
      }
    }

    .terms-page-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
      align-items: flex-start;
      justify-content: flex-start;
      padding-bottom: 1.5rem;

      .terms-page-section {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
        justify-content: flex-start;
        color: var(--gray);
        padding-top: 50px;
        margin-top: -50px;

        h2 {
          color: black;
        }

        .terms-page-list {
          display: flex;
          flex-direction: column;
          gap: 0.8rem;
          align-items: flex-start;
          justify-content: flex-start;
          padding-left: 1.5rem;
          padding-top: 0.5rem;
          padding-bottom: 0.5rem;

          li {
            font-size: var(--body);
            color: var(--gray);

            strong {
              color: black;
            }
          }
        }
      }
    }
  }
}