/* Scoped to the homepage experience section. Load after style.css and review-ui.css. */
.experience.section { padding-top: 76px; padding-bottom: 76px; }
.experience-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 30%); gap: 48px; align-items: center; }
.experience-intro-copy { max-width: 680px; }
.experience-intro-copy .eyebrow { color: var(--purple); margin-bottom: 18px; }
.experience-intro-copy h2 { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.1; margin-bottom: 16px; }
.experience-intro-copy > p:not(.eyebrow) { color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 580px; margin-bottom: 18px; }
.experience-intro-photo { margin: 0; }
.experience-intro-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1.8; object-fit: cover; filter: saturate(.7); }
.experience .experience-cases { margin-top: 42px; }
@media (max-width: 640px) {
  .experience.section { padding-top: 55px; padding-bottom: 55px; }
  .experience-intro { grid-template-columns: 1fr; gap: 24px; }
  .experience-intro-copy .eyebrow { margin-bottom: 16px; }
  .experience-intro-copy h2 { font-size: 32px; }
  .experience-intro-copy > p:not(.eyebrow) { font-size: 14px; }
  .experience-intro-photo img { aspect-ratio: 2.4; }
  .experience .experience-cases { margin-top: 30px; }
}