.blog-section-toc {

  font-family: var(--font-family-din-pro);

  font-size: var(--font-blog-toc-m-size);

  line-height: var(--font-blog-toc-m-line-height, normal);

  letter-spacing: var(--font-blog-toc-m-letter-spacing, 0);

  font-weight: var(--font-blog-toc-m-weight, 400)
}

.blog-section-toc {

  border-top-width: 1px;

  border-bottom-width: 1px;

  --tw-border-opacity: 1;

  border-color: rgb(var(--color-blue) / var(--tw-border-opacity));

  padding-top: 3.2rem;

  padding-bottom: 3.2rem
}

.blog-section-toc .blog-section-toc-title {

  font-family: var(--font-family-nb-international-pro);

  font-size: var(--font-subtitle-5-size);

  line-height: var(--font-subtitle-5-line-height, normal);

  letter-spacing: var(--font-subtitle-5-letter-spacing, 0);

  font-weight: var(--font-subtitle-5-weight, 400)
}

.blog-section-toc .blog-section-toc-title {

  margin-bottom: 1.6rem
}

.blog-section-toc .blog-section-toc-menu {

  margin-left: 1.6rem;

  width: 91.666667%;

  list-style-type: none;

  padding-left: 0
}

.blog-section-toc .blog-section-toc-menu ul {

  margin-left: 1.6rem
}

.blog-section-toc .blog-section-toc-menu li {

  width: 100%
}

.blog-section-toc .blog-section-toc-menu a {

  margin-left: 0.8rem;

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap
}

.blog-section-toc .blog-section-toc-menu > li > a {

  --tw-text-opacity: 1;

  color: rgb(var(--color-navy-01) / var(--tw-text-opacity))
}

.blog-section-toc .blog-section-toc-menu > li li > a {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  --tw-text-opacity: 1;

  color: rgb(var(--color-navy-03) / var(--tw-text-opacity))
}

.blog-section-toc .blog-section-toc-extra {

  margin-top: 1.6rem;

  width: 91.666667%;

  border-radius: 1.6rem;

  --tw-bg-opacity: 1;

  background-color: rgb(var(--color-blue) / var(--tw-bg-opacity));

  padding-top: 1.4rem;

  padding-bottom: 1.4rem;

  padding-left: 2.4rem;

  padding-right: 2.4rem
}

.blog-section-toc .blog-section-toc-extra a {

  display: flex;

  gap: 1.2rem;

  --tw-text-opacity: 1;

  color: rgb(var(--color-green) / var(--tw-text-opacity))
}

.blog-section-toc .blog-section-toc-extra a svg {

  margin-top: 0.6rem
}

.blog-section-toc .blog-section-toc-extra a:hover {

  --tw-text-opacity: 1;

  color: rgb(var(--color-green) / var(--tw-text-opacity));

  text-decoration-line: underline
}

.blog-section-toc .blog-section-toc-extra li {

  margin-bottom: 0.2rem
}

.blog-section-toc .blog-section-toc-extra li:last-child {

  margin-bottom: 0
}

@media (min-width: 640px) {

  .container {

    max-width: 640px
  }

  .\!container {

    max-width: 640px !important
  }

  .blog-section-toc-wrapper {

    max-width: 640px
  }
}

@media (min-width: 768px) {

  .container {

    max-width: 768px
  }

  .\!container {

    max-width: 768px !important
  }

  .blog-section-toc-wrapper {

    max-width: 768px
  }
}

@media (min-width: 1024px) {

  .container {

    max-width: 1024px
  }

  .\!container {

    max-width: 1024px !important
  }

  .gap-grid {

    gap: 2.4rem
  }

  .blog-section-toc-wrapper {

    width: 100%
  }

  @media (min-width: 640px) {

    .blog-section-toc-wrapper {

      max-width: 640px
    }
  }

  @media (min-width: 768px) {

    .blog-section-toc-wrapper {

      max-width: 768px
    }
  }

  @media (min-width: 1024px) {

    .blog-section-toc-wrapper {

      max-width: 1024px
    }
  }

  @media (min-width: 1280px) {

    .blog-section-toc-wrapper {

      max-width: 1280px
    }
  }

  @media (min-width: 1536px) {

    .blog-section-toc-wrapper {

      max-width: 1536px
    }
  }

  @media (min-width: 1800px) {

    .blog-section-toc-wrapper {

      max-width: 1800px
    }
  }

  .blog-section-toc-wrapper {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: -10;

    margin-left: auto;

    margin-right: auto;

    gap: 2.4rem
  }

  @media (min-width: 1024px) {

    .blog-section-toc-wrapper {

      gap: 2.4rem
    }
  }

  .blog-section-toc-wrapper {

    display: grid;

    grid-template-columns: repeat(12, minmax(0, 1fr));

    padding-left: 3.2rem;

    padding-right: 3.2rem
  }

  .blog-section-toc-inner {

    grid-column: span 3 / span 3;

    margin-bottom: 350px; /* controls when TOC hides */
  }

  .blog-section-toc-wrapper {

    max-width: 1024px
  }

  .blog-section-toc-wrapper {

    gap: 2.4rem
  }

  .blog-section-toc {

    font-size: var(--font-blog-toc-size);

    line-height: var(--font-blog-toc-line-height, normal);

    letter-spacing: var(--font-blog-toc-letter-spacing, 0);

    font-weight: var(--font-blog-toc-weight, 400)
  }

  .blog-section-toc {

    position: sticky;

    top: 10.0rem;

    height: 0;

    width: 91.666667%;

    border-width: 0px;

    padding-top: 0;

    padding-bottom: 0;

    padding-bottom: 34rem
  }

  .blog-section-toc .blog-section-toc-title {

    font-size: var(--font-subtitle-5-size);

    line-height: var(--font-subtitle-5-line-height, normal);

    letter-spacing: var(--font-subtitle-5-letter-spacing, 0);

    font-weight: var(--font-subtitle-5-weight, 400)
  }

  .blog-section-toc .blog-section-toc-extra {

    margin-top: 2.4rem;

    padding-top: 1.6rem;

    padding-bottom: 1.6rem;

    padding-left: 1.9rem;

    padding-right: 1.9rem
  }

  .blog-section-toc .blog-section-toc-extra a svg {

    margin-top: 0.8rem
  }
}

@media (min-width: 1280px) {

  .container {

    max-width: 1280px
  }

  .\!container {

    max-width: 1280px !important
  }

  .blog-section-toc-wrapper {

    max-width: 1280px
  }
}

@media (min-width: 1536px) {

  .container {

    max-width: 1536px
  }

  .\!container {

    max-width: 1536px !important
  }

  .blog-section-toc-wrapper {

    max-width: 1536px
  }
}

@media (min-width: 1800px) {

  .container {

    max-width: 1800px
  }

  .\!container {

    max-width: 1800px !important
  }

  .blog-section-toc-wrapper {

    max-width: 1800px
  }
}