.toc {
  backdrop-filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  display: none;
  padding: 24px;
}
.toc__title {
  color: var(--text-white);
  display: block;
  font:
    700 18px/28px "Inter",
    sans-serif;
  margin-bottom: 18px;
}
.toc__list {
  display: grid;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc__link {
  color: var(--text-white);
  display: block;
  font:
    400 14px/20px "Inter",
    sans-serif;
  text-decoration: none;
}
.toc__link:hover {
  color: var(--armada-light-color);
}

@media (max-width: 1023px) {
  .toc--inline {
    display: block;
    margin-bottom: 48px;
  }
}
@media (min-width: 1024px) {
  .toc--sidebar {
    display: block;
  }
}