:root{--paper:#f7f5ee;--ink:#172521;--gap:20px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:Arial,"Noto Sans SC","Microsoft YaHei",sans-serif}
.sr-only{position:fixed;inset:0 auto auto 0;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.detail-gallery{width:min(100%,1000px);margin:0 auto;padding:24px 30px 42px;display:grid;gap:var(--gap)}
.detail-gallery img{display:block;width:100%;max-width:100%;min-width:0;height:100%;object-fit:cover;object-position:center}
.detail-top{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);height:610px}
.detail-wide{height:580px!important}
.detail-bottom{display:grid;gap:var(--gap)}
.detail-bottom--three{grid-template-columns:.82fr 1.08fr 1.08fr;height:500px}
.detail-bottom--two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:590px}
.detail-gallery--ocean{overflow-x:clip}
.detail-gallery--ocean .detail-wide{height:auto!important;aspect-ratio:4/3}
.detail-gallery--ocean .detail-bottom--two{height:auto;align-items:start}
.detail-gallery--ocean .detail-bottom--two:not(.detail-bottom--ocean-last){aspect-ratio:auto}
.detail-gallery--ocean .detail-bottom--two:not(.detail-bottom--ocean-last) img{height:auto;aspect-ratio:3/4}
.detail-gallery--ocean .detail-bottom--ocean-last{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);height:auto;aspect-ratio:auto}
.detail-gallery--ocean .detail-bottom--ocean-last img{height:auto}
.detail-gallery--ocean .detail-bottom--ocean-last .ocean-selfie{aspect-ratio:3434/2639}
.detail-gallery--ocean .detail-bottom--ocean-last img:last-child{aspect-ratio:1.02/1}
.detail-gallery--spring .detail-top img:first-child{object-position:50% 52%}
.detail-gallery--spring .detail-top img:last-child{object-position:50% 48%}
.detail-gallery--spring .detail-wide{object-position:50% 33%}
.detail-gallery--spring .detail-bottom img:first-child{object-position:50% 58%}
.detail-gallery--spring .detail-bottom img:nth-child(2){object-position:50% 57%}
.detail-gallery--spring .detail-bottom img:last-child{object-position:48% 50%}
@media(max-width:700px){
  :root{--gap:10px}
  .detail-gallery{padding:12px}
  .detail-top,.detail-bottom{height:auto;grid-template-columns:1fr}
  .detail-gallery img,.detail-wide,.detail-gallery--ocean .detail-wide{height:auto!important;aspect-ratio:4/5}
  .detail-wide,.detail-gallery--ocean .detail-wide{aspect-ratio:4/3}
  .detail-gallery--ocean .detail-bottom{aspect-ratio:auto}
  .detail-gallery--ocean .detail-bottom--ocean-last .ocean-selfie{aspect-ratio:3434/2639}
}