/* 图片网格容器样式 */
.image-grid {
    display: grid;
    gap: 20px;
}

/* 图片项样式 */
.image-item {
    position: relative;
    display: flex; /* 使用 flex 布局 */
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 图片容器样式 */
.image-container {
    position: relative;
    flex-grow: 1; /* 使用 flex-grow 来使图片容器填充剩余空间 */
}

/* 图片样式 */
.image-item img {
    max-width: 100%;
    height: 100%; /* 使用 100% 的高度以填充图片容器 */
    object-fit: cover; /* 使用 object-fit 来调整图片填充方式 */
    border: 2px solid #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

/* 设置网格列数 */
.image-grid[data-columns="1"] {
    grid-template-columns: repeat(1, 1fr);
}

.image-grid[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.image-grid[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

/* 添加更多列数设置 */

/* 图片标题样式 */
.image-title {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    padding: 5px 10px;
    border-radius: 4px;
    border: 2px solid #fff;
    font-size: 12px; /* 调整字号 */
    font-weight: bold; /* 调整字重 */
}