/* styles.css */

/* 画廊容器样式 */
.gallery-container {
    max-width: 800px; /* 设置画廊容器的最大宽度 */
    margin: 20px auto; /* 居中显示 */
}

/* 图片行样式 */
.image-row {
    display: flex; /* 使用 Flex 布局 */
    justify-content: center; /* 图片居中显示 */
    margin-bottom: 10px; /* 图片行之间的间距 */
}

/* 图片样式 */
.gallery-image {
    width: 50%;
    height: 50%; /* 设置图片高度 */
    margin: 0 5px; /* 图片之间的间距 */
    cursor: pointer; /* 鼠标指针样式为指针 */
}

/* 覆盖层样式 */
.overlay {
    display: none; /* 初始隐藏 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
}

/* 关闭按钮样式 */
.close {
    position: absolute;
    top: 70px;
    right: 10px;
    font-size: 100px;
    cursor: pointer;
}
.arrow {
    font-size: 100px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff !important; /* 箭头颜色为白色 */
}

/* 左箭头的样式 */
.left {
    left: 20px; /* 左箭头的位置 */
}

/* 右箭头的样式 */
.right {
    right: 20px; /* 右箭头的位置 */
}

.gallery-large-image {
    max-width: 80%;
    height: 80%;
}