.pgl{padding:5vw 3.6vw;background:var(--stone-50)}.pgl-h{display:flex;justify-content:space-between;align-items:flex-end;gap:2vw;margin-bottom:2vw}.pgl-h h2{margin:.6vw 0 1vw;font:800 clamp(38px,4.6vw,88px)/1.02 var(--font-display);text-transform:uppercase;color:var(--forest-900)}.pgl-h h2 .o{color:var(--orange-500)}
.pgl-m{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1vw 2.4vw}.pgl-m li{display:flex;align-items:center;gap:.7vw;font:400 clamp(15px,1.25vw,21px) var(--font-sans);color:var(--forest-900)}.pgl-m svg{width:clamp(22px,1.8vw,30px);height:clamp(22px,1.8vw,30px);stroke:var(--orange-500)}.pgl-n{margin:0 0 1.4vw;font:400 14px var(--font-sans)}
.pgl-g{display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,19vw,340px);gap:1.2vw;align-items:stretch}
.pgl-main{position:relative;border-radius:16px;overflow:hidden;background:var(--forest-900);aspect-ratio:16/10.5}.pgl-main>img,.pgl-main>.pgl-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pgl-ph{display:grid;place-items:center;text-align:center;padding:2vw;background:repeating-linear-gradient(135deg,#e8e6df 0 14px,#f1efe8 14px 28px);color:var(--stone-700,#4a5148);font:600 clamp(14px,1.1vw,18px) var(--font-sans)}
.pgl-ar{position:absolute;top:50%;transform:translateY(-50%);width:clamp(48px,3.6vw,64px);height:clamp(48px,3.6vw,64px);border:0;border-radius:50%;background:var(--forest-900);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.3)}.pgl-ar.l{left:1.4vw}.pgl-ar.r{right:1.4vw}.pgl-ar svg,.pgl-fs svg{width:46%;height:46%;stroke:currentColor}.pgl-ar:hover{background:var(--orange-500);color:var(--forest-900)}
.pgl-cap{position:absolute;left:1.4vw;bottom:1.4vw;right:6vw;display:flex;align-items:stretch;border-radius:10px;overflow:hidden;background:rgba(14,31,22,.82);color:#fff;font:500 clamp(13px,1.05vw,17px) var(--font-sans);max-width:calc(100% - 7vw)}.pgl-cap b{padding:.7vw 1.1vw;background:rgba(0,0,0,.35);font-weight:700;white-space:nowrap}.pgl-cap span{padding:.7vw 1.1vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pgl-fs{position:absolute;right:1.4vw;bottom:1.4vw;width:clamp(44px,3.4vw,56px);height:clamp(44px,3.4vw,56px);border:0;border-radius:10px;background:var(--forest-900);color:#fff;cursor:pointer;display:grid;place-items:center}
.pgl-th{display:flex;flex-direction:column;gap:.8vw;overflow-y:auto;scrollbar-width:thin;position:relative;max-height:100%}.pgl-g{--mh:calc((100vw - 7.2vw - 19vw - 1.2vw)*10.5/16)}.pgl-th{height:var(--mh)}
.pgl-th button{flex:none;padding:0;border:3px solid transparent;border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:16/10;background:var(--stone-200);position:relative}.pgl-th button img,.pgl-th button .pgl-ph{width:100%;height:100%;object-fit:cover;display:grid;font-size:12px;padding:6px}.pgl-th button.on{border-color:var(--orange-500)}.pgl-th button:not(.on){opacity:.85}.pgl-th button:hover{opacity:1}
.pgl-lb{position:fixed;inset:0;z-index:100;background:rgba(9,20,13,.94);display:grid;place-items:center;padding:4vw}.pgl-lb>img,.pgl-lb>.pgl-ph{max-width:88vw;max-height:80vh;border-radius:8px}.pgl-lb>span{position:absolute;bottom:2.4vw;left:0;right:0;text-align:center;color:#fff;font:400 15px var(--font-sans);padding:0 5vw}.pgl-lb button{position:absolute;min-width:48px;min-height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:30px;cursor:pointer}.pgl-x{top:2vw;right:2vw}.pgl-lp{left:2vw;top:50%}.pgl-ln{right:2vw;top:50%}
@media(max-width:1000px){.pgl{padding:48px var(--page-x)}.pgl-h{flex-direction:column;align-items:flex-start;gap:18px}.pgl-m{gap:10px 20px}.pgl-m li{gap:8px}.pgl-g{grid-template-columns:1fr;gap:10px}.pgl-main{aspect-ratio:4/3;border-radius:12px}.pgl-ar{width:44px;height:44px}.pgl-ar.l{left:10px}.pgl-ar.r{right:10px}.pgl-cap{left:10px;bottom:10px;right:64px;max-width:none;font-size:13px}.pgl-cap b,.pgl-cap span{padding:8px 12px}.pgl-fs{right:10px;bottom:10px}.pgl-th{flex-direction:row;height:auto;overflow-x:auto;overflow-y:hidden;gap:10px;padding-bottom:4px}.pgl-th button{width:112px;border-radius:10px}}
.pgl-th button{box-sizing:border-box}.pgl-th button img{display:block}
.pgl-th button{box-sizing:border-box;position:relative}.pgl-th button>img,.pgl-th button>.pgl-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
