/* 基础样式 */
body {
    font-family: Arial, sans-serif; /* 设置全局字体 */
    margin: 0; /* 移除默认边距 */
    padding: 0; /* 移除默认填充 */
    background-color: #f4f4f4; /* 设置背景颜色 */
}

/* 头部导航栏样式 */
.header {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 左右两端对齐 */
    align-items: center; /* 垂直居中对齐 */
    background-color: #333; /* 设置背景颜色 */
    color: white; /* 设置文字颜色 */
    padding: 10px 20px; /* 设置内边距 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.header a {
    color: white; /* 设置链接文字颜色 */
    text-decoration: none; /* 移除下划线 */
    margin-left: 15px; /* 设置左边距 */
}

.header a:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* 内容区域样式 */
.content {
    padding: 20px; /* 设置内边距 */
}

h1 {
    color: #333; /* 设置标题颜色 */
}

p {
    line-height: 1.6; /* 设置行高 */
}

/* 图片容器样式 */
.image-container {
    display: flex; /* 使用 Flexbox 布局 */
    flex-wrap: wrap; /* 允许换行 */
    justify-content: center; /* 水平居中对齐 */
    margin-top: 20px; /* 设置顶部外边距 */
}

.image-column {
    width: 100%; /* 默认为手机端单列 */
    box-sizing: border-box; /* 包括内边距和边框在内的总宽度等于设置的宽度 */
    padding: 10px; /* 设置内边距 */
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 子元素按列排列 */
    align-items: center; /* 垂直居中对齐子元素 */
}

.image-column img {
    max-width: 100%; /* 最大宽度为父容器的宽度 */
    height: auto; /* 自动调整高度以保持比例 */
    border-radius: 8px; /* 圆角边框 */
}

.image-title {
    margin-top: 10px; /* 设置顶部外边距 */
    font-size: 18px; /* 设置字体大小 */
    color: #333; /* 设置文字颜色 */
    text-align: center; /* 文字水平居中对齐 */
}

/* 响应式设计：iPad (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .image-column {
        width: 50%; /* 两列排列 */
    }
}

/* 响应式设计：电脑端 (> 1024px) */
@media (min-width: 1025px) {
    .image-column {
        width: 25%; /* 四列排列 */
    }
}