main {
    position: relative;
}

.blog-title {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.3rem;
    margin-top: 5rem;
    margin-bottom: 3.2rem;
}

.blog-title>div:first-child {
    color: #000;
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 3.35rem;
    letter-spacing: -0.084rem;
    margin-bottom: 1.6rem;
    position: relative;
}


.blog-cover {
    background-image: url('https://uploads-ssl.webflow.com/6376e8f28efb9e05f9f526b7/63c4efdf0d836f8331038e00_pexels-yan-krukau-8837260.jpg');
    background-size: cover;
    background-position: center;
    height: 25rem;
    border-radius: 1.5rem;
    display: flex;
    align-items: flex-end;
}

/* 分类标签 */
.cate-tag {
    display: flex;
    gap: .6rem;
    margin-top: 1.05rem;
}

.cate-tag span {
    color: #020826;
    font-size: .8rem;
    letter-spacing: -0.016rem;
    padding: .45rem .7rem;
    text-align: center;
    border-radius: 2.4rem;
    background: #E0F4FF;
}

/* 分类标签 */

.blog-avatar {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1rem;
    letter-spacing: -0.02rem;
    margin-top: 1.6rem;
    margin-bottom: 3.2rem;
}

.blog-avatar>img:first-child {
    width: 2.8rem;
    height: 2.8rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 2.8rem;
    background: url(https://uploads-ssl.webflow.com/6376e8f28efb9e05f9f526b7/63c4efdf0d836f8331038e00_pexels-yan-krukau-8837260.jpg) lightgray 0rem -0.1672rem / 100% 125.065% no-repeat;
}

.blog-avatar>div:nth-child(2) {
    color: #020826;
    font-size: 1.4rem;
    letter-spacing: -0.028rem;
}

.blog-content img {
    width: 100%;
    max-width: 100vw;
}

/* 更多文章 blog 卡片 */
.blog-more {
    margin-top: 4rem;
}

.blog-more-title {
    color: #020826;
    font-size: 2.2rem;
    line-height: 3rem;
    position: relative;
    font-weight: 500;
}

.blog-more-title img {
    position: absolute;
    right: -2.5rem;
    top: -1rem;
}

.blog-more-list {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

.blog-more-list a{
    white-space: normal;
}

.blog-more-item {
    padding: 1.2rem;
    border-radius: .6rem;
    overflow: hidden;
    border: .05rem solid #FFF;
    background: #FFF;
    box-shadow: 0 .2rem 2.7rem 0 rgba(232, 236, 255, 0.80);
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.blog-more-item>img:first-child {
    width: 18.8rem;
    height: 9.4rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: .4rem;
}

.blog-more-cate {
    font-size: .6rem;
    line-height: 1.2rem;
    letter-spacing: -0.012rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.blog-more-cate span {
    font-weight: 500;
    border-radius: .2rem;
    background: #F2F3FA;
    padding: 0 .6rem;
}

.blog-more-item-title {
    color: #020826;
    font-size: 1rem;
    font-weight: 700;
    height: 2.7rem;
    line-height: 1.35rem;
    letter-spacing: -0.02rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-more-desc {
    font-size: .8rem;
    line-height: 1.15rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.blog-more-avatar {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #888686;
    font-size: .6rem;
    font-weight: 400;
    letter-spacing: -0.012rem;
}

.blog-more-avatar>img:first-child {
    width: 1.8rem;
    height: 1.8rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

.blog-more-avatar>div:nth-child(2) {
    color: #333;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: -0.016rem;
    max-width: 9.25rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}