/* 全局样式 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f9;
    color: #333;
}

/* 首页活动主照片容器样式 */
.photo-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.photo-item {
    width: calc(25% - 20px); /* 在电脑上每行显示 4 张照片 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.photo-item:hover {
    transform: translateY(-5px);
}

.photo-item img {
    width: 100%;
    height: auto;
    display: block;
}

.photo-item p {
    margin: 0;
    padding: 10px;
    text-align: center;
    background-color: #fff;
    font-weight: 500;
}

.image-container {
    width: 100%;
    /* 设置3x2比例的高度 */
    padding-top: 66.67%; 
    position: relative;
    overflow: hidden;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 列表页照片列表样式 */
.list-photo-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.list-photo-item {
    width: calc(25% - 20px); /* 在电脑上每行显示 4 张照片 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.list-photo-item:hover {
    transform: translateY(-5px);
}

.list-photo-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* 文章页照片大图样式 */
.article-photo {
    text-align: center;
    margin-top: 20px;
}

.article-photo img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.article-buttons {
    text-align: center;
    margin-top: 20px;
}

.article-buttons .btn {
    margin: 0 10px;
}

/* 响应式设计 */
@media (max-width: 992px) {
    .photo-item,
    .list-photo-item {
        width: calc(33.33% - 20px); /* 在平板上每行显示 3 张照片 */
    }
}

@media (max-width: 768px) {
    .photo-item,
    .list-photo-item {
        width: calc(50% - 20px); /* 在手机上每行显示 2 张照片 */
    }
}

@media (max-width: 576px) {
    .photo-item,
    .list-photo-item {
        width: 100%; /* 在小屏幕手机上每行显示 1 张照片 */
    }
}