.ph{
  width:100%;height:100%;position:relative;
  background:linear-gradient(135deg,var(--lagoon) 0%,var(--lagoon-2) 100%);
  color:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-style:italic;font-size:20px;
  text-align:center;padding:24px;overflow:hidden;
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 60% at 70% 30%,rgba(255,255,255,.18),transparent 60%),
    radial-gradient(60% 50% at 20% 80%,rgba(255,255,255,.1),transparent 60%);
  pointer-events:none;
}
.ph::after{
  content:"";position:absolute;inset:auto -10% -50% -10%;height:80%;
  background:radial-gradient(60% 50% at 50% 0%,rgba(255,255,255,.12),transparent 70%);
  filter:blur(20px);
}
.ph.sand{background:linear-gradient(135deg,#E8C87A,#C9A24A)}
.ph.deep{background:linear-gradient(135deg,#0F4C5C,#062A33)}
.ph.coral{background:linear-gradient(135deg,#F5A78A,#E8765C)}
.ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph > img + small{z-index:2;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.ph span{position:relative;z-index:1;letter-spacing:.04em}
.ph small{
  position:absolute;left:14px;bottom:12px;
  font-family:var(--sans);font-style:normal;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.7);z-index:1;
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:900px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}
.stack-lg{display:flex;flex-direction:column;gap:60px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:36px}}