/* ==================================================================
       Life at JPM slider
       ------------------------------------------------------------------
       The workforce photographs sit beside the intro copy as a single
       auto-advancing frame rather than a grid. Slick is already loaded
       by the theme and already used elsewhere with fade + infinite +
       autoplay, so the slider itself is that same component; only the
       framing is defined here.
       ================================================================== */

    .life_slider_wrap {
      overflow: hidden;
      position: relative;
      background-color: #eef0f3;
    }
    /* line-height:0 stops the inline-block slide track adding a few
       stray pixels under the image. */
    .life_slider {
      line-height: 0;
    }
    /* The source photographs are square. Fixing the ratio means a slide
       swap never changes the frame height, which is what keeps the fade
       from nudging the paragraph beside it. */
    .life_slide img {
      width: 100%;
      display: block;
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }
    /* Before slick initialises, every slide is in normal flow - all six
       would stack down the page for a moment on load. Only the first is
       shown until slick takes over. */
    .life_slider:not(.slick-initialized) .life_slide {
      display: none;
    }
    .life_slider:not(.slick-initialized) .life_slide:first-child {
      display: block;
    }

    /* Slick's fade mode stacks the slides, so the frame needs its own
       height from the active one. */
    .life_slider .slick-list,
    .life_slider .slick-track {
      height: 100%;
    }

    @media (max-width: 991px) {
      /* Stacked under the paragraph, a full-width square is too tall;
         a landscape crop keeps it in proportion. */
      .life_slider_wrap {
        margin-top: 34px;
      }
      .life_slide img {
        aspect-ratio: 16 / 10;
      }
    }