#app .main-products-wrapper {
    width: 100%;
    margin: auto;
    position: relative;
}

#app .main-products-wrapper::before {
    content: none;
}

.main-products-wrapper :is(.swiper-next, .swiper-prev) {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #50A56D33;
    z-index: 9;
    cursor: pointer;
    font-size: 20px;
    border-radius: 50%;
}

.main-products-wrapper .swiper-next {
    right: -35px;
}

.main-products-wrapper .swiper-prev {
    left: -40px;
}

.main-products-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 23.79px;
    text-align: left;
    color: #333333;
    margin: 25px 0;
}

.main-products-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 11px;
    width: 855px;
    min-height: 100px;
    position: relative;
    /* margin-bottom: 74px; */
}

#app .blog-list-wrapper .list-page {
    margin-top: 74px;
}

.main-products-item {
    width: 276px;

}

.main-products-item-img {
    display: block;
    width: 100%;
    height: 236px;
    object-fit: cover;
}

.main-products-item-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    margin: 13px auto 20px;
    color: var(--color);
    /* 可调参数 */
    --lines: 3;
    /* 固定宽度 */
    --lh: 1.5;
    /* 行高（单位无关，乘字体大小） */

    line-height: var(--lh);
    /* 固定高度 = 行数 × 行高 × 字号(1em) */
    height: calc(var(--lines) * 1em * var(--lh));

    /* 为了让固定高度包含内边距与边框，建议用 border-box */
    box-sizing: border-box;
    padding: 0;
    /* 如果要加上下内边距，会改变可容纳的行数 */

    /* 多行省略核心（现代浏览器 & Safari 兼容） */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lines);
    line-clamp: var(--lines);
    overflow: hidden;

    /* 文本长串适配（可选） */
    word-break: break-word;
    overflow-wrap: anywhere;
}

.main-products-content .main-btn {
    /* margin-top: 20px; */
}

/*mobile*/
@media only screen and (max-width: 1024px) {
    .main-products-wrapper :is(.swiper-next, .swiper-prev) {
        display: none;
    }

    .main-products-content {
        flex-wrap: wrap;
        margin-bottom: 0.71rem;
        width: 100%;
        gap: 0.27rem 0.08rem;
    }

    .main-products-item {
        width: 3.41rem;
    }

    .main-products-item-img {
        height: 2.85rem;
    }
}