.yp-hero-art { background: #eee; }
.yp-hero-art img { inset: 45px 0; width: 100%; height: calc(100% - 90px); object-fit: contain; }
.yp-scenes { padding-bottom: 80px; }
.yp-scenes h2 { font: 500 clamp(28px,4vw,44px)/1.2 var(--font-display); margin: 18px 0 30px; }
.yp-scenes > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.yp-scenes img { width: 100%; height: 240px; object-fit: cover; border-radius: 4px; }
@media(max-width: 700px) { .yp-scenes > div { grid-template-columns: repeat(2,1fr); gap: 10px; } .yp-scenes img { height: 170px; } }