html .joe_index__hot-list {
    grid-template-columns: repeat(4, 1fr);
}

html .joe_index__banner>.swiper-container {
    height: 550px;
}

html .joe_index__banner>.swiper-container .item {
    height: 550px;
}

/* 基础样式：添加过渡效果 */
html .joe_list {
    display: grid;
    column-gap: 15px;
    transition: all 0.3s ease; /* 添加过渡动画，0.3秒，缓动效果 */
}

/* 小于1000px时显示1列 */
@media (max-width: 300px) {
    html .joe_aside {
        display: none;
    }
    
    html .joe_list {
        grid-template-columns: 1fr; /* 单列 */
    }
    
    html .joe_list>.joe_list__item {
        border-radius: var(--radius-wrap);
    }
}

/* 1200px及以上显示2列 */
@media (min-width: 400px) {
    html .joe_aside {
        display: none;
    }
    
    html .joe_list {
        grid-template-columns: repeat(2, 1fr); /* 两列 */
    }
    
    html .joe_list>.joe_list__item {
        border-radius: var(--radius-wrap);
    }
}

/* 1600px及以上显示3列 */
@media (min-width: 1600px) {
    html .joe_aside {
        display: none;
    }
    
    html .joe_list {
        grid-template-columns: repeat(3, 1fr); /* 三列 */
    }
    
    html .joe_list>.joe_list__item {
        border-radius: var(--radius-wrap);
    }
}