.life-at-msil__track {
  position: relative;
  width: 100%;
}

.life-at-msil__sticky {
  position: relative;
  width: 100%;
}

.life-at-msil__wrapper {
  background: var(--corp-color-primary);
  position: relative;
  overflow: hidden;
  --card-h: 100dvh;

  @media (width >=768px) and (width < 1200px) {
    .life-at-msil__wrapper {
      --card-h: 60dvh;
    }
  }

  .hidden-div {
    display: none;

    @media (width >=768px) {
      display: block;
    }
  }

  .life-at-msil__watermark {
    position: absolute;
    top: 69px;
    left: 0;
    font-size: var(--corp-type-desktop-display-4xl-font-size);
    font-weight: var(--fw-400);
    line-height: var(--corp-type-desktop-display-4xl-line-height);
    color: var(--corp-color-white);
    opacity: .05;
    white-space: nowrap;
    overflow: hidden;

    @media (width >=768px) {
      font-size: var(--corp-type-tablet-display-xxl-font-size);
      font-weight: var(--corp-type-tablet-display-xxl-font-weight);
      line-height: var(--corp-type-tablet-display-xxl-line-height);
      top: 136px;
    }

    @media (width >=1200px) {
      font-size: var(--corp-type-desktop-display-5xl-font-size);
      font-weight: var(--corp-type-desktop-display-5xl-font-weight);
      line-height: var(--corp-type-desktop-display-5xl-line-height);
      top: 140px;
      left: -160px;
    }
  }

  .life-at-msil__card .g-row {
    gap: 40px;

    @media (width >=768px) {
      gap: 16px;
    }

    @media (width >=1200px) {
      gap: 24px;
    }
  }

  .life-at-msil__card-image {
    overflow: hidden;
    border-radius: 15px;

    img {
      height: unset;
    }

    @media (width >=768px) {
      height: 231px;
    }

    @media (width >=1200px) {
      height: 411px;
    }
  }

  .life-at-msil__card-content {
    text-align: center;

    @media (width >=768px) {
      text-align: left;
    }
  }

  .life-at-msil__card-title {
    font-size: var(--corp-type-mobile-display-2-font-size);
    font-weight: var(--corp-type-mobile-display-2-font-weight);
    line-height: var(--corp-type-mobile-display-2-line-height);
    color: var(--corp-color-white);
    margin-bottom: 12px;

    @media (width >=768px) {
      font-size: var(--corp-type-tablet-heading-xl-font-size);
      font-weight: var(--corp-type-tablet-heading-xl-font-weight);
      line-height: var(--corp-type-tablet-heading-xl-line-height);
      margin-bottom: 10px;
    }

    @media (width >=1200px) {
      font-size: var(--corp-type-desktop-heading-1-font-size);
      font-weight: var(--corp-type-desktop-heading-1-font-weight);
      line-height: var(--corp-type-desktop-heading-1-line-height);
      margin-bottom: 18px;
    }
  }

  .life-at-msil__card-description {
    font-size: var(--corp-type-mobile-body-3-font-size);
    font-weight: var(--corp-type-mobile-body-3-font-weight);
    line-height: var(--corp-type-mobile-body-3-line-height);
    color: var(--corp-color-white);
    opacity: .6;

    @media (width >=768px) {
      font-size: var(--corp-type-tablet-body-sm-3-font-size);
      font-weight: var(--corp-type-tablet-body-sm-3-font-weight);
      line-height: var(--corp-type-tablet-body-sm-3-line-height);
    }

    @media (width >=1200px) {
      font-size: var(--corp-type-desktop-body-5-font-size);
      font-weight: var(--corp-type-desktop-body-5-font-weight);
      line-height: var(--corp-type-desktop-body-5-line-height);
    }
  }

  .life-at-msil__grid {
    @media (width >=768px) {
      .life-at-msil__card {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .life-at-msil__card-content {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          padding-bottom: 34px;
        }
      }
    }
  }
}

@media (width < 768px) {
  .life-at-msil__wrapper {
    .life-at-msil__card {
      padding: 195px 0 83px;
    }

    .life-at-msil__card {
      padding: 195px 0 83px;
    }

    .splide__arrows {
      position: absolute;
      bottom: 26px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 33px;
      z-index: 3;

      .splide__arrow {
        background: color-mix(in srgb, var(--corp-color-neutral-black) 20%, transparent);
        padding: 0;
        width: 32px;
        height: 32px;
        border-radius: 100px;
        border: 0;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: url(/corporate/icons/corp-slider-arrow.svg) no-repeat center / contain;
          width: 16px;
          height: 16px;
        }

        &.splide__arrow--prev::before {
          transform: translate(-50%, -50%) rotate(-180deg);
        }

        &[disabled]::before {
          opacity: .5;
        }

        svg {
          display: none;
        }
      }
    }

    .life-at-msil__card {
      .life-at-msil__card-content {
        display: flex;
        flex-direction: column;
        order: 2;
      }

      .life-at-msil__card-image {
        img {
          width: 100%;
          height: unset;
        }
      }
    }
  }
}

@media (width >=768px) {
  .life-at-msil__track {
    min-height: calc(var(--life-at-msil-count, 1) * var(--card-h, 100dvh));
  }

  .life-at-msil__sticky {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: var(--card-h, 100dvh);
    max-height: var(--card-h, 100dvh);
    min-height: var(--card-h, 100dvh);
    overflow: hidden;
    position: sticky;
    top: calc((100dvh - var(--card-h, 100dvh)) / 2);
    width: 100%;
  }

  .life-at-msil__wrapper {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    width: 100%;
  }

  .life-at-msil__wrapper .life-at-msil__grid {
    flex-direction: column;
    height: auto;
    min-height: calc(var(--life-at-msil-count, 1) * var(--card-h, 100dvh));
    will-change: transform;
    transform: translate3d(0,
        calc(-1 * var(--life-at-msil-p, 0) * (var(--life-at-msil-count, 1) - 1) * var(--card-h, 100dvh)),
        0);
  }

  .life-at-msil__wrapper .life-at-msil__grid .life-at-msil__card {
    height: var(--card-h, 100dvh);
  }
}

@media (width >=768px) and (width < 1200px) {
  .life-at-msil__wrapper {
    --card-h: 75dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .life-at-msil__track {
    min-height: 0;
  }

  .life-at-msil__sticky {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    position: static;
  }

  .life-at-msil__wrapper {
    overflow: visible;
  }

  .life-at-msil__wrapper .life-at-msil__grid {
    transform: none !important;
    will-change: auto;
  }
}