body {
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    padding: 0;
    background-color: #191919;
}

header {
    background-color: #191919; 
    color: #fff;
    padding: 20px;
    gap: 10px;
    text-align: center;
}

header img {
    width: 100px; /* 设置图片宽度 */
    height: 100px; /* 设置图片高度 */
    margin-bottom: 10px; /* 图片与标题之间的间距 */
}

header h1 {
    font-family: 'Times New Roman', Times, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 36px; /* 设置字号为36px */
    margin: 0; /* 去掉默认的外边距 */
}

header p {
    font-family: 'Times New Roman', Times, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px; /* 设置字号为36px */
    margin: 20px 0 0;


}

.copy {
	padding: 20px 0;
	font-size: 14px;
	color: #ccc;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 250px); /* 每行最多展示4张250px宽的图片 */
    gap: 4px; /* 图片之间的间距 */
    justify-content: center; /* 居中对齐 */
    padding: 20px;
}


.gallery img {
    width: 100%; /* 图片宽度自适应 */
    height: auto; /* 高度自动调整以保持比例 */
}

/* 响应式设计：当屏幕宽度小于768px时，每行显示3个图片 */
@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 当屏幕宽度小于480px时，每行显示2个图片 */
@media (max-width: 480px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #191919;
    color: #fff;
}