/* 文章页的本地响应式兜底，避免外部 Bootstrap 未加载时固定尺寸内容溢出。 */
.blog-post {
    min-width: 0;
    max-width: 100%;
}

.blog-post img,
.blog-post figure {
    max-width: 100%;
}

.blog-post img {
    height: auto;
}

.blog-post figure {
    margin-left: 0;
    margin-right: 0;
}

.blog-post .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.blog-post table {
    max-width: 100%;
}

.blog-post h1,
.blog-post h2,
.blog-post h3,
.blog-post p,
.blog-post li,
.blog-post th,
.blog-post td {
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    main.container {
        box-sizing: border-box;
        max-width: 100%;
        width: 100%;
    }

    .blog-post h1 {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
        line-height: 1.3;
    }

    .blog-post .featured-image img,
    .blog-post figure img {
        display: block;
        width: 100%;
    }
}