/* Masonry网格项样式设置 */
.grid-item {
    width: 33.333%; /* 三列布局 */
    padding: 10px; /* 网格间隙 */
    box-sizing: border-box; /* 包括内边距在内的宽度计算方法 */
    float: left; /* 浮动布局 */
}

@media (max-width: 800px) {
    .grid-item {
        width: 50%; /* 适应屏幕变小，两列布局 */
    }
}

@media (max-width: 400px) {
    .grid-item {
        width: 100%; /* 单列布局，适应手机屏幕 */
    }
}

/* 图片样式，包含圆角和阴影 */
.grid-item img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* 圆角边框 */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15); /* 阴影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 动态过渡效果 */
}

/* 鼠标悬停时的图片样式 */
.grid-item img:hover {
    transform: scale(1.03); /* 放大图片 */
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2); /* 加大阴影 */
}

.image-slider {
    position: relative;
    width: fit-content;
    margin: auto;
    padding-right: 10px;
    padding-left: 10px;
}

#prevBtn, #nextBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#prevBtn {
    left: 10px; /* 距离左侧的距离 */
}

#nextBtn {
    right: 10px; /* 距离右侧的距离 */
}

#sliderImage {
    height: auto;
    display: block;
}

.slider-img {
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}