/* Section 5 - Experience banner. Proportions from the 1920x510 Figma export. */
.experience{position:relative;width:100%;min-height:510px;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;background:#2b2a26;color:#F8F4EB;text-align:center}
.experience__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.experience__overlay{position:absolute;inset:0;background:rgba(0,0,0,var(--exp-overlay,.45))}

.experience__inner{position:relative;z-index:2;width:100%;max-width:820px;padding:96px 24px 110px;display:flex;flex-direction:column;align-items:center}

.experience__eyebrow{display:flex;align-items:center;gap:20px;margin:0 0 22px;font:400 14px/14.4px "Jost",sans-serif;letter-spacing:2.88px;text-transform:uppercase;color:#F8F4EB}
.experience__eyebrow::before{content:"";width:40px;height:1px;background:#F8F4EB}

.experience__heading{margin:0;max-width:700px;font:400 96px/1.1 "Cormorant Garamond",serif;letter-spacing:.16px;text-transform:capitalize;color:#F8F4EB}

@media (max-width:1279px){.experience__heading{font-size:76px}}
@media (max-width:1023px){
  .experience{min-height:440px}
  .experience__inner{padding:80px 24px 90px}
  .experience__heading{font-size:60px}
}
@media (max-width:767px){
  .experience{min-height:380px}
  .experience__inner{padding:64px 20px 70px}
  .experience__eyebrow{font-size:12px;letter-spacing:2.2px;gap:12px}
  .experience__eyebrow::before{width:24px}
  .experience__heading{font-size:42px}
}