.experience-gallery{
  padding:86px 0 68px;
  background:linear-gradient(180deg,#eaf2ff 0%,#f1f3fc 52%,#edeefa 100%);
}
.experience-heading{
  align-items:end;
  gap:35px;
  margin-bottom:34px;
  color:#233e66;
}
.experience-heading>span{align-self:start;padding-top:11px;white-space:nowrap}
.experience-heading>div{text-align:right}
.experience-heading h2{
  margin:0;
  font-family:var(--hand);
  font-size:clamp(30px,3.3vw,51px);
  font-weight:500;
  line-height:1.25;
  letter-spacing:.015em;
}
.experience-heading p{margin:11px 0 0;font-size:14px;letter-spacing:.04em;color:#637b9a}
.experience-gallery .marquee-row{overflow:hidden}
.experience-gallery .marquee-row+.marquee-row{margin-top:16px}
.experience-gallery .marquee-track{gap:16px}
.experience-gallery .experience-tile{
  width:450px;
  height:342px;
  flex:0 0 450px;
  padding:7px;
  text-align:left;
  border:1px solid #b5c7df;
  border-radius:23px;
  background:#fffaf2;
  box-shadow:0 9px 24px #5267871a;
  cursor:zoom-in;
}
.experience-gallery .experience-tile--portrait,
.experience-gallery .experience-tile--poster{width:262px;flex-basis:262px}
.experience-gallery .experience-tile img{
  display:block;
  width:100%;
  height:260px;
  border-radius:17px 17px 6px 6px;
  object-fit:cover;
  object-position:center;
  mix-blend-mode:normal;
  background:#dfe7f2;
}
.experience-gallery .experience-tile--portrait img{object-position:center 31%}
.experience-gallery .experience-tile--poster img{object-position:center 15%}
.experience-gallery .experience-tile--wide img{object-position:center 48%}
.experience-gallery .experience-copy{
  position:static;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:2px 8px;
  height:66px;
  padding:7px 10px 4px;
  border:0;
  background:transparent;
  color:#203b62;
  font-family:inherit;
}
.experience-copy small{
  grid-column:1/-1;
  font:600 9px/1.1 Outfit,system-ui,sans-serif;
  letter-spacing:.15em;
  color:#8196b1;
}
.experience-copy strong{font-family:var(--hand);font-size:20px;font-weight:500;line-height:1.2;white-space:nowrap}
.experience-copy em{font-size:11px;font-style:normal;line-height:1.2;text-align:right;white-space:nowrap;color:#617b9c}
.experience-gallery .experience-tile--portrait .experience-copy,
.experience-gallery .experience-tile--poster .experience-copy{grid-template-columns:1fr}
.experience-gallery .experience-tile--portrait .experience-copy em,
.experience-gallery .experience-tile--poster .experience-copy em{text-align:left}
.experience-gallery .experience-tile:hover{box-shadow:0 12px 30px #52678738}
.experience-gallery .experience-tile:focus-visible{outline:3px solid #4e79ab;outline-offset:4px}
.experience-hint{margin:22px var(--page-pad) 0;text-align:right;font-size:11px;letter-spacing:.08em;color:#8195ad}
.experience-dialog{
  width:min(92vw,1050px);
  max-height:90svh;
  padding:18px;
  border:1px solid #aec0d8;
  border-radius:25px;
  background:#fffaf2;
  color:#203b62;
  box-shadow:0 24px 80px #162a49a6;
}
.experience-dialog::backdrop{background:#0f2137c9;backdrop-filter:blur(8px)}
.experience-dialog figure{margin:0}
.experience-dialog img{display:block;max-width:100%;max-height:calc(90svh - 95px);margin:auto;border-radius:13px;object-fit:contain}
.experience-dialog figcaption{display:flex;justify-content:space-between;gap:18px;padding:12px 7px 2px}
.experience-dialog figcaption strong{font-family:var(--hand);font-size:20px;font-weight:500}
.experience-dialog figcaption span{font-size:12px;color:#617b9c}
.experience-dialog-close{
  position:absolute;top:23px;right:23px;z-index:2;width:35px;height:35px;
  border:1px solid #b8c6d7;border-radius:50%;background:#fffaf2;color:#203b62;
  font-size:27px;line-height:1;cursor:pointer;
}
@media(max-width:760px){
  .experience-gallery{padding:62px 0 50px}
  .experience-heading{display:block;margin-bottom:23px}
  .experience-heading>span{display:block;padding:0;font-size:9px}
  .experience-heading>div{text-align:left}
  .experience-heading h2{margin-top:9px;font-size:31px}
  .experience-heading p{font-size:12px;line-height:1.6}
  .experience-gallery .experience-tile{width:340px;height:287px;flex-basis:340px;border-radius:19px}
  .experience-gallery .experience-tile--portrait,
  .experience-gallery .experience-tile--poster{width:215px;flex-basis:215px}
  .experience-gallery .experience-tile img{height:212px;border-radius:13px 13px 5px 5px}
  .experience-gallery .experience-copy{height:60px;padding:6px 7px 3px}
  .experience-copy strong{font-size:17px}
  .experience-copy em{font-size:9px}
  .experience-hint{font-size:9px}
  .experience-dialog{padding:10px}
  .experience-dialog figcaption{display:block;padding:10px 5px 2px}
  .experience-dialog figcaption span{display:block;margin-top:4px}
}
@media(prefers-reduced-motion:reduce){
  .experience-gallery .marquee-row{overflow-x:auto}
}