@view-transition {
    navigation: auto;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #E2D4C4;
    width: 100%;
    min-height: 100vh; 
    overflow-y: scroll;       /* 始终显示垂直滚动条 */
    overflow-x: hidden;       /* 仍然隐藏横向滚动条 */
    /* overflow-y: auto; */
}

/* 这是顶部导航栏的粘性定位 */
header{
    position: sticky;
    top: 0;
    z-index: 100;
}
.photo-item{
    max-width: 100%; 
    margin-bottom: 300px;
}
/* 这是第一种图片尺寸/ */
.big{
    width: 900px;
    height: auto;
}
/* 这是第二种图片尺寸/ */
.middle{
    width: 500px;
    height: auto;
}
/* 这是第三种图片尺寸/ */
.small{
    width: 400px;
    height: 600px;
    /* height: auto; */
}

/* 这是位置信息 */
.center{
    margin: 0px auto 300px;
}
.left{
    margin-right: auto;
}
.right{
    margin-left: auto;
}

/* 这是四盒子 */
.four{
    width: 1100px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin: 0 auto 300px;
    gap: 50px;
}

/* 左边距 */
.left-margin{
    margin-left: 60px;
}
/* 右边距 */
.right-margin{
    margin-right: 60px;
}

img{
    width: 100%;
    height: 100%;
    /* height: auto; */

    object-fit: cover;
}

@media screen and (max-width: 1032px) {
    /* 所有图片块居中，两边留 16px 空隙 */
    .photo-item {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 200px;/*取消前面边界的影响*/
        max-width: calc(100% - 48px);   /* 左右各 24px，你可以改成自己喜欢的值 */
    }
    .center{
        margin-bottom: 200px;/*取消前面边界的影响*/
    }

    /* 四宫格改成单列，居中，宽度自适应 */
    .four {
        display: block;
        width: 100%;
        max-width: calc(100% - 48px);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 200px;/*取消前面边界的影响*/
        gap: 0;                         /* 去掉 grid 的 gap，改用 margin-bottom */
    }
    .four-item {
        margin-bottom: 30px;            /* 四张图之间的间距 */
    }

    /* 所有图片宽度占满容器，高度自动保持比例 */
    .big,
    .middle,
    .small {
        width: 100%;
        height: auto;                   /* 重要：取消固定高度，防止变形 */
    }

    /* 取消左右边距类的影响 */
    .left-margin,
    .right-margin {
        margin-left: 0;
        margin-right: 0;
    }

    

}
@media screen and (max-width: 768px){
    .photo-item{
        margin-bottom: 50px;
    }
    .center{
        margin-bottom: 50px;
    }
    .four{
        margin-bottom: 50px;
    }
}

/* 图片显示 */
.photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 初始状态：完全裁掉，只留顶部一条缝 */
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  transition: clip-path 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.photo.is-open {
  /* 完全显示 */
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}