/* Team experience and the approved film and television poster gallery. */
.team-experience {
  margin-top: clamp(62px, 7vw, 100px);
  padding-top: clamp(48px, 5vw, 76px);
  border-top: 1px solid #40535e;
}
.experience-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7%;
  align-items: start;
  margin-bottom: 64px;
}
.experience-heading .eyebrow {
  color: #68c6e5;
  font-size: 10px;
  letter-spacing: 1.8px;
  margin: 0 0 23px;
}
.experience-heading h3 {
  font: 500 clamp(36px, 3.65vw, 55px)/1.08 var(--display);
  letter-spacing: -.015em;
  margin: 0;
}
.experience-heading h3 span { color: #9fb7c4; }
.experience-copy p {
  color: #c0cdd5;
  font-size: 14px;
  line-height: 1.85;
  margin: 0 0 17px;
  max-width: 62ch;
}
.experience-copy p:last-child { margin-bottom: 0; }
.experience-project-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 27px;
}
.experience-project-heading .eyebrow {
  color: #9eb7c5;
  font-size: 9px;
  letter-spacing: 1.6px;
  margin: 0 0 12px;
}
.experience-project-heading h3 {
  font: 500 clamp(28px, 2.7vw, 40px)/1.15 var(--display);
  margin: 0;
  letter-spacing: -.01em;
}
.experience-medium {
  flex-shrink: 0;
  color: #a8bfcc;
  font-size: 9px;
  letter-spacing: 1.4px;
  margin: 0 0 5px;
}
.experience-medium span { color: #5c97b0; padding: 0 9px; }
.experience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.experience-card {
  min-width: 0;
}
.experience-card figure { margin: 0; }
.experience-poster-frame {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid #40535e;
  background: #080e13;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.experience-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.experience-card figcaption {
  padding-top: 14px;
}
.experience-card h4 {
  font: 600 14px/1.4 var(--font);
  min-height: 2.8em;
  color: #eef3f5;
  margin: 0;
  overflow-wrap: anywhere;
}
@media (hover: hover) {
  .experience-card:hover .experience-poster-frame {
    border-color: #8caebf;
    box-shadow: 0 7px 24px #03080d40;
  }
}
.experience-credit-note {
  margin: 22px 0 0;
  max-width: 760px;
  font-size: 11px;
  line-height: 1.8;
  color: #a6bac6;
}
@media (max-width: 1100px) {
  .experience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .experience-intro { gap: 5%; }
}
@media (max-width: 800px) {
  .experience-intro { grid-template-columns: 1fr; gap: 28px; margin-bottom: 45px; }
  .experience-heading h3 { font-size: clamp(36px, 5.7vw, 46px); }
  .experience-copy p { max-width: 70ch; }
  .experience-medium { display: none; }
}
@media (max-width: 600px) {
  .experience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .experience-card figcaption { padding-top: 11px; }
  .experience-card h4 { font-size: 13px; }
  .experience-copy p { font-size: 13px; line-height: 1.85; }
  .experience-project-heading h3 { font-size: 32px; max-width: 330px; }
  .experience-project-heading .eyebrow { font-size: 8px; letter-spacing: 1.3px; max-width: 31ch; }
}
@media (max-width: 360px) {
  .experience-card h4 { font-size: 12px; }
}