.custom-media-gallery {
    display: flex;
    flex-wrap: wrap;            /* 保证元素换行 */
    gap: 20px;                  /* 设置项目之间的间距 */
    justify-content: flex-start; /* 左对齐 */
}

.custom-media-gallery .media-item {
    display: block;
    width: calc(33.33% - 20px);  /* 每个项目宽度为三分之一，减去间距 */
    box-sizing: border-box;     /* 确保元素宽度计算不包括边框和内边距 */
    text-align: center;
    color:black;
}

.custom-media-gallery img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.custom-media-gallery img:hover {
    transform: scale(1.05);
}

/* 确保每行最多显示3个项目 */
@media (max-width: 1200px) {
    .custom-media-gallery .media-item {
        width: calc(33.33% - 20px); /* 每行最多显示3个项目 */
    }
}

@media (max-width: 768px) {
    .custom-media-gallery .media-item {
        width: calc(50% - 20px); /* 在平板设备上，每行显示2个项目 */
    }
}

@media (max-width: 480px) {
    .custom-media-gallery .media-item {
        width: 100%; /* 在手机设备上，每行显示1个项目 */
    }
}