/* ==========================================================================
	Experience Vertical Video Layout
============================================================================= */
.experience-videos {
  overflow: hidden;
}

.experience-videos__inner {
  padding-block: 50px;
  padding-block: 3.125rem;
}

@media (min-width:61.25rem) {
  .experience-videos__row {
    display: none;
  }
}

.experience-videos__row-footer {
  margin-block-start: 30px;
  margin-block-start: 1.875rem;
}

.experience-videos__columns {
  display: grid;
  gap: 6%;
  grid-template-areas: "--media --tabs";
  grid-template-columns: 1fr round(51%, 1px);
  grid-template-columns: 1fr round(51%, 0.0625rem);
}
@media (max-width:61.1875rem) {
  .experience-videos__columns {
    display: none;
  }
}

/* Video carousel row (small screens)
============================================================================= */
.experience-videos__row-media {
  --layered-media-aspect-ratio: 9 / 16;
  overflow: visible;
}

.experience-videos__row-media-item-slide {
  inline-size: min(78vw, 525px);
  inline-size: min(78vw, 32.8125rem);
}

.experience-videos__row-carousel-controls {
  margin-block-start: 15px;
  margin-block-start: 0.9375rem;
}

/* Video descriptions carousel (small screens)
============================================================================= */
.experience-videos__row-text {
  margin-block-start: 20px;
  margin-block-start: 1.25rem;
}

.experience-videos__row-text-item-slide {
  z-index: 1;
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.5s;
}
.experience-videos__row-text-item-slide.swiper-slide-active {
  z-index: 2;
  opacity: 1 !important;
  pointer-events: auto;
}

.experience-videos__row-text-item {
  border-inline-start: 3px solid #e8b720;
  border-inline-start: 0.1875rem solid #e8b720;
  padding-inline-start: 22px;
  padding-inline-start: 1.375rem;
}

.experience-videos__row-text-content {
  max-inline-size: 500px;
  max-inline-size: 31.25rem;
  display: grid;
  gap: 4px;
  gap: 0.25rem;
  grid-template-columns: 100%;
}

.experience-videos__row-text-title {
  font-size: 22px;
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.45;
}

.experience-videos__row-text-subtitle {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.625;
  font-style: italic;
}
@container (min-width: 500px) {
  .experience-videos__row-text-subtitle {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.7777777778;
  }
}

.experience-videos__row-text-description {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.625;
  color: rgba(14, 65, 104, 0.7);
}
@container (min-width: 500px) {
  .experience-videos__row-text-description {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.7777777778;
  }
}

/* Tabs (large screens)
============================================================================= */
.experience-videos__tabs {
  translate: var(--inline-end-translate);
  grid-area: --tabs;
  opacity: 0;
  padding-block-start: clamp(20px, -86.5217391304px + 10.8695652174vw, 70px);
  padding-block-start: clamp(1.25rem, -5.40761rem + 10.8695652174vw, 4.375rem);
  transition: var(--panel-transition);
  transition-delay: var(--intro-transition-delay);
}
@media (min-width:61.25rem) {
  .fw-swap-ready .experience-videos__tabs {
    translate: 0 0 0;
    opacity: 1;
  }
}
@media (min-width:61.25rem) {
  .no-js .experience-videos__tabs {
    translate: 0 0 0;
    opacity: 1;
  }
}

.experience-videos__tabs-item {
  --background-color: transparent;
  --translate-x: 0;
  --box-shadow-width: 0;
  --panel-display: none;
  --description-opacity: 0;
  background-color: var(--background-color);
  box-shadow: inset var(--box-shadow-width) 0 0 0 #e8b720;
  overflow: hidden;
  transition: background-color 0.25s, box-shadow 0.25s;
}
.experience-videos__tabs-item:has(.fw-swap-active) {
  --background-color: rgba(157, 206, 230, 0.2);
  --translate-x: 10px;
  --translate-x: 0.625rem;
  --box-shadow-width: 3px;
  --box-shadow-width: 0.1875rem;
  --panel-display: block;
  --description-opacity: 1;
}
@media (min-width:76.25rem) {
  .experience-videos__tabs-item:has(.fw-swap-active) {
    --translate-x: 20px;
    --translate-x: 1.25rem;
  }
}

.experience-videos__tabs-header {
  translate: var(--translate-x);
  text-wrap: auto;
  transition: translate 0.25s;
}

.experience-videos__tab {
  inline-size: 100%;
  display: grid;
  gap: 10px;
  gap: 0.625rem;
  grid-template-columns: 100%;
  color: #0e4168;
  text-align: start;
  padding: 20px;
  padding: 1.25rem;
  padding-block-start: 30px;
  padding-block-start: 1.875rem;
  padding-inline-end: clamp(60px, -3.9130434783px + 6.5217391304vw, 90px);
  padding-inline-end: clamp(3.75rem, -0.24457rem + 6.5217391304vw, 5.625rem);
}
.experience-videos__tab:focus-visible {
  color: #001835;
}
@media (hover: hover) {
  .experience-videos__tab:hover {
    color: #001835;
  }
}

.experience-videos__tab-title {
  max-inline-size: 505px;
  max-inline-size: 31.5625rem;
  font-size: clamp(20px, 15.7391304348px + 0.4347826087vw, 22px);
  font-size: clamp(1.25rem, 0.9837rem + 0.4347826087vw, 1.375rem);
  font-weight: 900;
  line-height: 1.2;
}

.experience-videos__tab-subtitle {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.625;
  max-inline-size: 505px;
  max-inline-size: 31.5625rem;
  font-style: italic;
}
@container (min-width: 500px) {
  .experience-videos__tab-subtitle {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.7777777778;
  }
}

.experience-videos__tabs-panel {
  display: var(--panel-display);
  padding-block-end: 30px;
  padding-block-end: 1.875rem;
  padding-inline: 20px clamp(60px, -3.9130434783px + 6.5217391304vw, 90px);
  padding-inline: 1.25rem clamp(3.75rem, -0.24457rem + 6.5217391304vw, 5.625rem);
}

.experience-videos__tabs-description {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.625;
  max-inline-size: 505px;
  max-inline-size: 31.5625rem;
  margin-block-start: -8px;
  margin-block-start: -0.5rem;
  transition: translate 0.25s, opacity 0.25s;
}
@container (min-width: 500px) {
  .experience-videos__tabs-description {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.7777777778;
  }
}
.experience-videos__tabs-panel.fw-swap-ready .experience-videos__tabs-description {
  translate: var(--translate-x);
  opacity: var(--description-opacity);
}

.experience-videos__tabs-footer {
  margin-block-start: clamp(30px, -119.1304347826px + 15.2173913043vw, 100px);
  margin-block-start: clamp(1.875rem, -7.44565rem + 15.2173913043vw, 6.25rem);
}

/* Video stack carousel (large screens)
============================================================================= */
.experience-videos__stack {
  --layered-media-aspect-ratio: 9 / 16;
  translate: var(--inline-start-translate);
  grid-area: --media;
  opacity: 0;
  overflow: visible;
  transition: var(--panel-transition);
  transition-delay: var(--media-transition-delay);
}
@media (min-width:61.25rem) {
  .fw-swap-ready .experience-videos__stack {
    translate: 0 0 0;
    opacity: 1;
  }
}
@media (min-width:61.25rem) {
  .no-js .experience-videos__stack {
    translate: 0 0 0;
    opacity: 1;
  }
}

.experience-videos__stack-items {
  pointer-events: none;
}

.experience-videos__stack-slide {
  inline-size: round(79%, 1px);
  inline-size: round(79%, 0.0625rem);
  transform-origin: center center;
  border-radius: 3px;
  border-radius: 0.1875rem;
  overflow: hidden;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
/*# sourceMappingURL=experience-videos.css.map */