/*
     * 模块主容器样式
     * 移除了 max-width 和左右的 margin: auto,
     * 让容器宽度自动适应其所在的父容器。
     */
    .photo-wall-container {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        width: 100%;
        margin: 40px 0;
        padding: 0 15px;   /* 在手机端时，左右留出一些边距 */
        box-sizing: border-box;
    }

    /*
     * 标题和副标题样式
     */
    .photo-wall-header {
        text-align: center;
        margin-bottom: 30px;
    }

    .photo-wall-header h2 {
        font-size: 28px;
        font-weight: 600;
        color: #333;
        margin: 0 0 10px 0;
    }

    .photo-wall-header p {
        font-size: 16px;
        color: #777;
        margin: 0;
    }

    /*
     * 照片网格容器
     */
    .photo-grid {
        display: grid;
        gap: 15px;
        grid-template-columns: repeat(4, 1fr);
    }

    /*
     * 单个照片项目
     */
    .photo-grid-item {
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        aspect-ratio: 4 / 3;
    }

    .photo-grid-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease-in-out;
        display: block;
    }

    .photo-grid-item:hover img {
        transform: scale(1.05);
    }

    /*
     * 响应式设计
     */
    @media (max-width: 992px) {
        .photo-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (max-width: 576px) {
        .photo-wall-container {
             margin: 25px 0;
        }
        .photo-wall-header h2 {
            font-size: 24px;
        }
        .photo-wall-header p {
            font-size: 14px;
        }
        .photo-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
    }