/* Screenshot annotations scale with the original screenshot. */
.panel-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.panel-nav a{padding:9px 16px;border:1px solid var(--line);border-radius:30px;font-size:13px;background:var(--white)}
.panel-nav a:hover{background:var(--mint)}
.panel-card{margin:0 0 32px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--white);scroll-margin-top:24px}
.panel-shot{display:block;position:relative;background:#303030;color:white;isolation:isolate}
.panel-arrow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 2px 3px #000)}
.panel-callout{position:absolute;left:32%;top:50%;width:24%;color:white;line-height:1.5;text-shadow:0 2px 4px #000}
.panel-callout strong{display:block;font-size:clamp(12px,1.8vw,24px);line-height:1.2;margin-bottom:10px;letter-spacing:-.02em}
.panel-callout>span{display:block;font-size:clamp(9px,1.2vw,16px)}
.panel-card figcaption{display:grid;grid-template-columns:1fr 1.4fr;gap:24px;padding:24px 28px}
.panel-card h3{font-size:23px;line-height:1.3}
.panel-card figcaption p{font-size:14px}
/* This section currently contains one text column. */
.custom-scene-layout{grid-template-columns:1fr}
.custom-scene-copy{max-width:850px}
@media(max-width:760px){
  .panel-card figcaption{display:block;padding:20px}
  .panel-card figcaption p{margin-top:10px}
  .panel-callout{top:53%;width:25%}
  .panel-callout strong{font-size:clamp(9px,2.6vw,18px);margin:0}
  .panel-callout>span{display:none}
  .panel-nav a{font-size:12px;padding:8px 12px}
}