.blog-table-of-contents {
    margin: 28px 0 34px;
    padding: 22px 24px;
    border: 1px solid #eadfd6;
    border-left: 4px solid #ed6c2a;
    border-radius: 14px;
    background: #fffaf6;
    box-shadow: 0 9px 28px rgba(91,55,33,.06)
}

.blog-toc-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px
}

    .blog-toc-heading span {
        display: block;
        margin-bottom: 2px;
        color: #ed6c2a;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .13em
    }

    .blog-toc-heading h2 {
        margin: 0;
        color: #603b25;
        font-size: 22px;
        font-weight: 800
    }

.blog-toc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 0;
    background: transparent;
    color: #795b49;
    font-size: 12px;
    font-weight: 700
}

.blog-toc-list {
    margin: 18px 0 0;
    padding: 16px 0 0;
    counter-reset: toc;
    border-top: 1px solid #eadfd6;
    list-style: none
}

    .blog-toc-list li {
        position: relative;
        margin: 0;
        padding: 5px 0 5px 34px;
        counter-increment: toc
    }

        .blog-toc-list li::before {
            position: absolute;
            top: 5px;
            left: 0;
            content: counter(toc,decimal-leading-zero);
            color: #eb6a2b;
            font-size: 16px;
            font-weight: 800
        }

        .blog-toc-list li.toc-level-3 {
            padding-left: 52px
        }

        .blog-toc-list li.toc-level-4 {
            padding-left: 70px
        }

        .blog-toc-list li.toc-level-3::before {
            left: 18px
        }

        .blog-toc-list li.toc-level-4::before {
            left: 36px
        }

    .blog-toc-list a {
        color: #634a3b;
        font-size: 15px;
        font-weight: 650;
        line-height: 1.5
    }

        .blog-toc-list a:hover {
            color: #ed6c2a
        }

.blog-content-anchor {
    scroll-margin-top: 110px
}

@media(max-width: 767px) {
    .blog-table-of-contents {
        margin: 22px 0 28px;
        padding: 18px 16px
    }

    .blog-toc-heading h2 {
        font-size: 19px
    }

    .blog-toc-toggle span {
        display: none
    }

    .blog-toc-list li, .blog-toc-list li.toc-level-3, .blog-toc-list li.toc-level-4 {
        padding-left: 30px
    }

        .blog-toc-list li.toc-level-3::before, .blog-toc-list li.toc-level-4::before {
            left: 0
        }

    .blog-toc-list a {
        font-size: 13px
    }

    .blog-content-anchor {
        scroll-margin-top: 88px
    }
}