/* ============================================================
   Slider Cards — corporate carousel with grid-based slide widths
   Breakpoints: mobile < 768 | tablet 768–1199 | desktop >= 1200
   ============================================================ */

.slider-cards {
  --slider-cards-desc-ink: var(--corp-color-heading);
  --slider-cards-desc-ink-muted: var(--corp-color-overlay-black-65);
  --slider-cards-desc: var(--corp-color-overlay-black-60);
  /* Splide track end-padding: visible slice of next card (read in JS) */
  --slider-cards-peek: min(36vw, 140px);
  /* Figma card frame: portrait tile (width : height) */
  --slider-cards-card-aspect: 4 / 5;

  background: var(--corp-color-surface);
  overflow-x: visible;
}

.slider-cards-wrapper {
  margin-top: 20px;
}

.slider-cards__inner {
  width: 100%;
  overflow: visible;
}

.slider-cards__row {
  align-items: flex-start;
  overflow: visible;
}

/* ---- Intro (title + description) -------------------------------- */

.slider-cards__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Eyebrow / label — first line in title (Figma Body 5) */
.slider-cards__title>p:first-of-type {
  font-size: var(--corp-type-desktop-body-5-font-size);
  font-style: normal;
  font-weight: var(--corp-type-desktop-body-5-font-weight);
  line-height: var(--corp-type-desktop-body-5-line-height);
  letter-spacing: 0.02em;
  color: var(--corp-color-primary);
  text-transform: capitalize;
}

/* Additional title lines as display (when authors use multiple <p>) */
.slider-cards__title>p~p {
  font-family: var(--corp-display-font-family);
  font-size: var(--corp-type-mobile-display-lg-font-size);
  font-style: normal;
  font-weight: var(--corp-type-mobile-display-lg-font-weight);
  line-height: var(--corp-type-mobile-display-lg-line-height);
  letter-spacing: -0.02em;
  color: var(--corp-color-heading);
  text-transform: none;
}

.slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
  color: var(--corp-color-neutral-black);
  font-family: var(--corp-font-family);
  font-size: var(--corp-type-mobile-display-3-font-size);
  line-height: var(--corp-type-mobile-display-3-line-height);
  font-weight: var(--corp-type-mobile-display-3-font-weight);
  letter-spacing: -0.56px;

  &>strong {
    font-weight: var(--corp-type-mobile-display-xl-font-weight);
    color: var(--corp-color-primary);
  }
}

.slider-cards__title>p:first-of-type+ :is(h1, h2, h3, h4, h5, h6, p) {
  margin-top: 0;
}

/* Main supporting copy — dark stone (not faint grey); authors can use <strong> for emphasis */
.slider-cards__desc {
  font-family: var(--corp-display-font-family);
  font-size: var(--corp-type-mobile-body-1-font-size);
  font-style: normal;
  font-weight: var(--corp-type-mobile-body-1-font-weight);
  line-height: var(--corp-type-mobile-body-1-line-height);
  color: var(--slider-cards-desc);
  letter-spacing: -0.14px;
  padding-bottom: 16px;
}

.slider-cards__desc strong,
.slider-cards__desc b {
  font: inherit;
  font-weight: var(--corp-type-mobile-body-3-font-weight);
  color: var(--slider-cards-desc-ink);
}

/* ---- Carousel column + stage ------------------------------------ */

.slider-cards__carousel-col {
  min-width: 0;
  padding-bottom: 28px;
  /* Mobile + up: bleed into right gutter so peek matches desktop */
  margin-right: calc(-1 * var(--container-margin));
}

.slider-cards__carousel {
  position: relative;
  width: 100%;
}

.slider-cards__stage {
  position: relative;
  width: calc(100% + var(--container-margin));
  margin-right: calc(-1 * var(--container-margin));
}

/* ---- Splide ------------------------------------------------------ */

.slider-cards__splide {
  position: relative;
  overflow: hidden;
}

.slider-cards__splide .splide__track {
  overflow: hidden;
}

.slider-cards__splide .splide__list {
  align-items: stretch;
}

/* Override global .splide__slide flex so card aspect-ratio resolves from width */
.slider-cards__splide .splide__slide {
  display: block;
  height: auto;
}

/* Slide width = N columns of current grid (same formula as .g-sm-3 / .g-md-3 / .g-lg-4) */
.slider-cards__slide {
  height: auto;
  margin: 0;
}

/* ---- Card (link or static) -------------------------------------- */

.slider-cards__article {
  display: block;
  width: 100%;
  margin: 0;
}

.slider-cards__card {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--slider-cards-card-aspect);
  border-radius: var(--corp-radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 14px rgb(0 0 0 / 0.06);
  transition:
    box-shadow 160ms ease,
    transform 160ms ease;
}

.slider-cards__card:hover {
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.1);
  transform: translateY(-2px);
}

.slider-cards__card:focus-visible {
  outline: 2px solid var(--corp-color-focus);
  outline-offset: 3px;
}

.slider-cards__card--static {
  cursor: default;
}

.slider-cards__card--static:hover {
  transform: none;
  box-shadow: 0 2px 14px rgb(0 0 0 / 0.06);
}

.slider-cards__media {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.slider-cards__picture {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(180deg, rgba(23, 28, 143, 0) 44.72%, rgba(23, 28, 143, 0.9) 100%);
}

.slider-cards__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradient overlay — MSIL corporate image cards (Figma CC Pt 2) */
.slider-cards__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(23, 28, 143, 0) 44.72%, rgba(23, 28, 143, 0.9) 100%);
  background-blend-mode: multiply;
}

.slider-cards__body {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Mobile: arrow is top-right — no extra right inset for bottom control */
  padding: 0px 36px 12px 13px;
  color: var(--corp-color-white);
}

/*
 * Card affordance arrow — Figma MSIL Corporate CC Pt 2 (node 6124-26957 desktop, 7349-52429 mobile)
 * Default: fill rgba(255,255,255,0.2) + blur 18.65px | Hover: fill #fff + blur (chevron → primary)
 * Sizes: 32×32 mobile & tablet, 42×42 desktop | Mobile: top-right; tablet+: bottom-right
 */
.slider-cards__card-arrow {
  --slider-cards-card-arrow-blur: 18.65px;

  position: absolute;
  top: 12px;
  right: 12px;
  bottom: auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--corp-color-white);
  background: rgb(255 255 255 / 0.2);
  backdrop-filter: blur(var(--slider-cards-card-arrow-blur));
  -webkit-backdrop-filter: blur(var(--slider-cards-card-arrow-blur));
  pointer-events: none;
  transition:
    background-color 160ms ease,
    color 160ms ease;
  padding: 6px;
}

.slider-cards__card:hover .slider-cards__card-arrow,
.slider-cards__card:focus-visible .slider-cards__card-arrow {
  /* background: var(--corp-color-white); */
  color: var(--corp-color-primary);
}

.slider-cards__card--static:hover .slider-cards__card-arrow {
  background: rgb(255 255 255 / 0.2);
  color: var(--corp-color-white);
}

.slider-cards__card-arrow-icon {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-left: 1px;
}

.slider-cards__card-title {
  font-size: var(--corp-type-mobile-heading-xl-font-size);
  line-height: var(--corp-type-mobile-heading-xl-line-height);
  font-weight: var(--corp-type-mobile-heading-xl-font-weight);
  color: var(--corp-color-white);
}

.slider-cards__card-title :is(h1, h2, h3, h4, h5, h6, p) {
  font-size: var(--corp-type-mobile-heading-1-regular-font-size);
  font-weight: var(--corp-type-mobile-heading-1-regular-font-weight);
  line-height: var(--corp-type-mobile-heading-1-regular-line-height);
  color: var(--corp-color-white);
  margin: 0;
}

.slider-cards__card-desc {
  font-family: var(--corp-font-family);
  font-size: var(--corp-type-mobile-body-sm-font-size);
  line-height: var(--corp-type-mobile-body-sm-line-height);
  font-weight: var(--corp-type-mobile-body-sm-2-font-weight);
  color: var(--corp-color-white);
}

.slider-cards__card-desc p {
  margin: 0;
}

/* ---- Carousel nav (tablet + desktop): centered under track, Figma corp-arrow-btn ----- */

.slider-cards__arrows {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--corp-space-md);
  margin-top: 24px;
  padding-inline: 0;
  width: 100%;
  background: transparent;
}

.slider-cards__arrows .corp-arrow-btn {
  flex-shrink: 0;
}

.slider-cards__arrows .corp-arrow-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Match Figma stroke weight on 60px circular controls */
.slider-cards__nav-btn svg {
  width: 24px;
  height: 24px;
}

/* ---- Custom dots (mobile) --------------------------------------- */

.slider-cards__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.slider-cards__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgb(8 12 11 / 0.22);
  cursor: pointer;
  transition:
    width 200ms ease,
    height 200ms ease,
    background 200ms ease;
}

.slider-cards__dot.is-active {
  width: 11px;
  height: 11px;
  background: var(--corp-color-primary);
}

.slider-cards__dot:focus-visible {
  outline: 2px solid var(--corp-color-focus);
  outline-offset: 2px;
}

.slider-cards__card-arrow-icon {
  display: none;
}

.slider-cards__card-arrow::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background: center / contain no-repeat url('/corporate/icons/right-up-arrow.svg');
}

/* ============================================================
   TABLET >= 768
   ============================================================ */

@media screen and (width >=768px) {
  .slider-cards-wrapper {
    margin-top: 0;
  }

  .slider-cards {
    --slider-cards-peek: min(26vw, 200px);
    --slider-cards-card-aspect: 4 / 5;
  }

  .slider-cards__row {
    display: flex;
    align-items: center;
    padding-top: 20px;
  }

  .slider-cards__intro {
    display: flex;
    flex-direction: column;
  }

  .slider-cards__card-title :is(h1, h2, h3, h4, h5, h6, p) {
    line-height: var(--corp-type-tablet-body-11-line-height);
  }

  .slider-cards__carousel-col {
    padding-bottom: 40px;
  }

  .slider-cards__title>p:first-of-type {
    margin: 0 0 20px;
  }

  .slider-cards__card {
    /* width:264px;   */
    border-radius: var(--corp-cta-radius-hero);
  }

  .slider-cards__card-arrow {
    top: auto;
    right: 11px;
    bottom: 12px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(14.3px);
    -webkit-backdrop-filter: blur(14.3px);
  }

  .slider-cards__card-arrow-icon {
    width: 14px;
    height: 14px;
  }

  .slider-cards__overlay {
    background: linear-gradient(180deg, rgba(23, 28, 143, 0) 44.72%, rgba(23, 28, 143, 0.9) 100%);
    background-blend-mode: multiply;
  }

  .slider-cards__title>p~p,
  .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
    font-family: var(--corp-font-family);
    font-size: var(--corp-type-tablet-heading-xl-font-size);
    line-height: var(--corp-type-tablet-display-l-line-height);
    font-weight: var(--corp-type-tablet-display-xxl-font-weight);
    letter-spacing: -0.2px;
    color: var(--corp-color-primary);
  }

  .slider-cards__desc {
    font-size: var(--corp-type-tablet-body-1-font-size);
    font-weight: var(--corp-type-tablet-body-2-font-weight);
    line-height: var(--corp-type-tablet-body-8-line-height);
    color: var(--corp-color-primary-hover);
    letter-spacing: -0.36px;
    padding-bottom: 0px;
  }

  .slider-cards__arrows {
    display: flex;
    margin-top: 18px;
  }

  .slider-cards__arrows>.corp-arrow-btn {
    width: 32px;
    height: 32px;
    background-color: var(--corp-color-primary);
  }

  .slider-cards__dots {
    display: none;
  }

  .slider-cards__body {
    /* Clear 32px bottom-right arrow + inset */
    padding: 18px 48px 22px 16px;
    gap: 10px;
  }

  .slider-cards__card-title {
    font-size: var(--corp-type-tablet-heading-lg-font-size);
    line-height: var(--corp-type-tablet-heading-lg-line-height);
    font-weight: var(--corp-type-tablet-heading-lg-font-weight);
  }

  .slider-cards__card-desc {
    font-size: var(--corp-type-tablet-body-sm-font-size);
    line-height: var(--corp-type-tablet-body-sm-3-line-height);
    font-weight: var(--corp-type-tablet-body-lg-font-weight);
  }

  .slider-cards__dot {
    width: 8.22px;
    height: 8.22px;
  }

  .slider-cards__dot.is-active {
    width: 10.96px;
    height: 10.96px;
  }

  .slider-cards__nav-btn svg {
    display: none;
  }

  .slider-cards__nav-btn::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .slider-cards__nav-btn:disabled {
    background: rgb(0 0 0 / 20%);
    border: none;
    box-shadow: none;
    pointer-events: none;
    opacity: 1;
  }

  .slider-cards__nav-btn:not(:disabled) {
    background: var(--corp-color-primary);
  }

  .slider-cards__nav-btn--prev::before {
    background-image: url('/corporate/icons/arrow-left.svg');
  }

  .slider-cards__nav-btn--next::before {
    background-image: url('/corporate/icons/arrow-right.svg');
  }

  .slider-cards__arrows>.corp-arrow-btn svg {
    display: none;
  }
}

/* ============================================================
   DESKTOP >= 1200
   ============================================================ */

@media screen and (width >=1200px) {
  .slider-cards {
    --slider-cards-peek: min(22vw, 280px);
    --slider-cards-card-aspect: 16 / 19;
  }

  .slider-cards__intro {
    display: flex;
    justify-content: center;
  }

  .slider-cards__row {
    display: flex;
    align-items: center;
    padding-top: 40px;
  }

  .slider-cards__title>p:first-of-type {
    margin: 0 0 20px;
    line-height: var(--corp-type-desktop-heading-4-line-height);
    text-transform: none;
  }

  .slider-cards__card-arrow {
    right: 20px;
    bottom: 20px;
    width: 42px;
    height: 42px;
  }

  .slider-cards__card-arrow::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background: center / contain no-repeat url('/corporate/icons/arrow_white.svg');
  }

  .slider-cards__overlay {
    background: linear-gradient(180deg, rgba(23, 28, 143, 0) 44.72%, rgba(23, 28, 143, 0.9) 100%);
    background-blend-mode: multiply;
  }

  .slider-cards__splide .splide__track {
    padding-right: var(--slider-cards-peek);
  }

  .slider-cards__title>p~p,
  .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
    font-size: var(--corp-type-desktop-heading-1-font-size);
    line-height: var(--corp-type-desktop-heading-1-line-height);
    color: var(--corp-color-primary);
    margin: 0 0 8px;
  }

  .slider-cards__card-title :is(h1, h2, h3, h4, h5, h6, p) {
    font-size: var(--corp-type-desktop-heading-1-font-size);
    line-height: var(--corp-type-desktop-heading-1-line-height);
  }

  .slider-cards__title strong {
    font-weight: var(--corp-type-desktop-heading-xxl-font-weight);
  }

  .slider-cards__desc {
    font-size: var(--corp-type-desktop-caption-2-font-size);
    font-weight: var(--corp-type-desktop-caption-2-font-weight);
    line-height: var(--corp-type-desktop-caption-2-line-height);
    color: var(--corp-color-primary-hover);
  }

  .slider-cards__desc>p {
    font-size: var(--corp-type-desktop-body-2-font-size);
    font-weight: var(--corp-type-desktop-body-font-weight);
    line-height: var(--corp-type-desktop-heading-3xl-line-height);
  }

  .slider-cards__arrows {
    position: absolute;
    margin-bottom: 104px;
    left: -138px;
    right: -138px;
    background: transparent;
    margin-top: 50px;
  }

  .slider-cards__inner {
    position: relative;
    margin-bottom: 104px;
  }

  .slider-cards__card {
    border-radius: var(--corp-radius-lg);
    background: linear-gradient(to bottom, rgb(23 28 143 / 0.1) 0%, rgb(23 28 143 / 0.05) 30%, rgb(0 0 0 / 0.55) 65%, rgb(0 0 0 / 0.82) 100%);
  }

  .slider-cards__body {
    /* Clear 42px bottom-right arrow + inset (Figma 6124-26957) */
    padding: 22px 60px 26px 20px;
    gap: 12px;
  }

  .slider-cards__card-title {
    font-size: var(--corp-type-desktop-heading-3-font-size);
    line-height: var(--corp-type-desktop-heading-3-line-height);
    font-weight: var(--corp-type-desktop-heading-3-font-weight);
  }

  .slider-cards__card-desc {
    font-size: var(--corp-type-desktop-body-xs-font-size);
    line-height: var(--corp-type-desktop-body-xs-line-height);
    font-weight: var(--corp-type-desktop-body-font-weight);
    font-family: var(--corp-font-family);
  }

  .slider-cards__arrows>.corp-arrow-btn {
    width: 60px;
    height: 60px;
  }

  .slider-cards__arrows>.corp-arrow-btn svg {
    display: none;
  }

  .slider-cards__nav-btn::before {
    width: 30px;
    height: 30px;
  }

  .slider-cards__picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: linear-gradient(180deg, rgba(23, 28, 143, 0) 44.72%, rgba(23, 28, 143, 0.9) 100%);
    background-blend-mode: multiply;
  }
}

/* More From Maruti Suzuki variation */
.slider-cards {
  &.more-from-maruti {
    --slider-cards-gap: var(--corp-space-lg);

    background: var(--corp-color-surface);

    .slider-cards__media,
    .slider-cards__picture,
    .slider-cards__picture img,
    .slider-cards__card {
      background: transparent;
      background-image: none;
      background-blend-mode: normal;
    }

    .slider-cards__overlay {
      display: block;
      opacity: 1;
      visibility: visible;
      background:
        linear-gradient(0deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 20%) 100%),
        linear-gradient(180deg, rgb(0 0 0 / 0%) 50.11%, var(--corp-color-overlay-black-80) 100%);
      background-blend-mode: normal;
      filter: none;
    }

    .slider-cards__row {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 0 20px 80px;
    }

    .slider-cards__inner {
      padding-inline: 0;
    }

    .slider-cards__intro {
      gap: var(--corp-space-lg);
      margin-block-end: var(--corp-space-xl);
      max-width: none;
    }

    .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
      color: var(--corp-color-neutral-black);
      font-family: var(--corp-font-family);
      font-size: var(--corp-type-mobile-display-3-font-size);
      font-weight: var(--corp-type-mobile-display-2-font-weight);
      line-height: var(--corp-type-mobile-heading-xl-line-height);
      letter-spacing: -0.56px;

      strong {
        color: var(--corp-color-primary);
        font-weight: inherit;
      }
    }

    .slider-cards__desc {
      color: var(--corp-color-neutral-black);
      font-family: var(--corp-font-family);
      font-size: var(--corp-type-mobile-body-2-font-size);
      font-weight: var(--corp-type-mobile-body-2-font-weight);
      line-height: var(--corp-type-mobile-body-2-line-height);
      letter-spacing: 0;

      p {
        color: var(--slider-cards-desc);
        padding-right: 20px;
        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);
        text-align: left;
      }
    }

    .slider-cards__carousel-col {
      margin-right: calc(-1 * var(--container-margin));
      max-width: none;
      padding-bottom: 0;
      width: 100%;
    }

    .slider-cards__card {
      border-radius: var(--corp-radius-md);
    }

    .slider-cards__body {
      gap: var(--corp-space-md);
      padding: 0 20px 25px;
    }

    .slider-cards__card-title {
      font-size: var(--corp-type-mobile-display-1-font-size);
      font-weight: var(--corp-type-mobile-display-1-font-weight);
      line-height: var(--corp-type-desktop-heading-lg-line-height);
    }

    .slider-cards__card-desc {
      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);
    }

    .slider-cards__card-arrow {
      display: none;
    }

    .slider-cards__dots {
      margin-top: 16px;
    }

    .slider-cards__nav-btn {
      &:disabled {
        background: rgb(0 0 0 / 20%);
        border: none;
        box-shadow: none;
        pointer-events: none;
      }

      &:not(:disabled) {
        background: var(--corp-color-primary);
      }
    }

    @media (width >=768px) {
      .slider-cards__row {
        padding: 20px 20px 69px;
      }

      .slider-cards__intro {
        align-items: center;
        margin: 0;
      }

      .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
        color: var(--corp-color-primary);
        font-size: var(--corp-type-tablet-display-font-size);
        font-weight: var(--corp-type-tablet-display-font-weight);
        line-height: var(--corp-type-tablet-heading-xl-line-height);
        letter-spacing: -0.42px;

        strong {
          color: inherit;
        }
      }

      .slider-cards__desc {
        padding: 0 191px;
        font-size: var(--corp-type-tablet-body-lg-font-size);
        font-weight: var(--corp-type-tablet-body-lg-font-weight);
        line-height: var(--corp-type-tablet-body-8-line-height);
        letter-spacing: -0.14px;

        p {
          font-weight: var(--corp-type-tablet-body-lg-font-weight);
          margin-bottom: var(--corp-space-sm);
          padding: 0;
          text-align: center;
        }
      }

      .slider-cards__body {
        inset: 0;
        justify-content: flex-end;
        padding: var(--corp-space-md);
      }

      .slider-cards__card-title {
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(100% - 32px);
        text-align: center;
        transform: translate(-50%, -50%);
        font-size: var(--corp-type-tablet-display-sm-font-size);
        line-height: var(--corp-type-tablet-display-sm-line-height);
      }

      .slider-cards__card-desc {
        position: relative;
        z-index: 1;
        padding-right: 35px;
        font-size: var(--corp-type-tablet-body-1-font-size);
        font-weight: var(--corp-type-tablet-body-2-font-weight);
        line-height: var(--corp-type-tablet-body-8-line-height);
        letter-spacing: -0.36px;
      }
    }

    @media (width >=1200px) {
      --slider-cards-gap: var(--corp-space-xl);

      background: var(--corp-color-slate);

      .slider-cards__row {
        padding: 94px 56px 81px;
      }

      .slider-cards__intro {
        margin-block-end: 36px;
      }

      .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
        font-size: var(--corp-type-desktop-heading-xxl-font-size);
        font-weight: var(--corp-type-desktop-heading-xxl-font-weight);
        line-height: var(--corp-type-desktop-heading-xxl-line-height);
        letter-spacing: -1.5px;
      }

      .slider-cards__desc {
        padding: 0 410px;
        font-size: var(--corp-type-desktop-body-3-font-size);
        font-weight: var(--corp-type-desktop-body-3-font-weight);
        line-height: var(--corp-type-desktop-body-3-line-height);
        letter-spacing: -0.42px;
      }

      .slider-cards__card-title :is(h1, h2, h3, h4, h5, h6, p) {
        font-size: var(--corp-type-desktop-heading-xxl-font-size);
        font-weight: var(--corp-type-desktop-heading-xxl-font-weight);
        line-height: var(--corp-type-desktop-heading-xxl-line-height);
        letter-spacing: -1.5px;
      }

      .slider-cards__card-desc {
        position: relative;
        font-size: var(--corp-type-desktop-body-font-size);
        font-weight: var(--corp-type-desktop-body-font-weight);
        line-height: var(--corp-type-desktop-body-line-height);
        letter-spacing: -0.16px;

        p {
          padding-right: 54px;
        }
      }

      .slider-cards__carousel-col,
      .slider-cards__stage {
        margin-right: 0;
        width: 100%;
      }

      .slider-cards__body {
        inset: 0;
        justify-content: flex-end;
        padding: var(--corp-space-lg);
      }

      .slider-cards__arrows,
      .slider-cards__dots {
        display: none;
      }

      .slider-cards__card-arrow {
        display: flex;
        position: absolute;
        top: auto;
        right: var(--corp-space-lg);
        bottom: var(--corp-space-lg);
        backdrop-filter: blur(19px);
        -webkit-backdrop-filter: blur(19px);
      }

      .slider-cards__card {

        &:hover,
        &:focus-visible {
          .slider-cards__card-arrow {
            color: var(--corp-color-primary);
            background: var(--corp-color-white);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);

            &::before {
              background: var(--corp-color-primary);
              mask: url('/corporate/icons/arrow_white.svg') center / contain no-repeat;
              -webkit-mask: url('/corporate/icons/arrow_white.svg') center / contain no-repeat;
            }
          }
        }
      }

      .slider-cards__inner {
        margin-bottom: 0;
      }
    }
  }
}

/* Our Focus Areas (CSR page) variation */
.slider-cards.block {
  &.csr-page-focus-areas {
    --slider-cards-focus-gap: var(--corp-space-xl);
    --slider-cards-peek: var(--corp-space-xl);
    --slider-cards-card-aspect: 310 / 444;

    background: var(--corp-color-surface);

    .slider-cards__row {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding-block: 0 93px;
    }

    .slider-cards__intro {
      margin-block-end: var(--corp-space-2xl);
    }

    .slider-cards__subtitle {
      font-family: var(--corp-font-family);
      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-tablet-body-8-line-height);
      color: var(--corp-color-neutral-black);
      opacity: 0.4;
      margin: 0;
      padding-top: 31px;
    }

    .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
      font-family: var(--corp-font-family);
      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-5-line-height);
      letter-spacing: -0.56px;
      color: var(--corp-color-neutral-black);
      margin: 0;

      strong {
        color: var(--corp-color-primary);
        font-weight: inherit;
      }
    }

    .slider-cards__desc {
      font-family: var(--corp-font-family);
      font-size: var(--corp-type-mobile-body-2-font-size);
      font-weight: var(--corp-type-mobile-body-2-font-weight);
      line-height: var(--corp-type-mobile-body-2-line-height);
      color: var(--slider-cards-desc);

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

      @media (width >=1200px) {
        font-size: var(--corp-type-desktop-body-2-font-size);
        line-height: var(--corp-type-desktop-heading-3xl-line-height);
      }
    }

    .slider-cards__carousel-col {
      width: 100%;
      margin-right: calc(-1 * var(--corp-space-xl));
      padding-bottom: 0;
    }

    .slider-cards__stage {
      width: calc(100% + var(--corp-space-xl));
      margin-right: calc(-1 * var(--corp-space-xl));
    }

    .slider-cards__card {
      border-radius: var(--corp-radius-md);
    }

    .slider-cards__overlay {
      background:
        linear-gradient(0deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 20%) 100%), linear-gradient(180deg, rgb(0 0 0 / 0%) 50%, var(--corp-color-overlay-black-80) 100%);
      background-blend-mode: normal;
    }

    .slider-cards__body {
      padding: 0 21px 28px;
      gap: var(--corp-space-md);
      width: 100%;
    }

    .slider-cards__card-title :is(h1, h2, h3, h4, h5, h6, p) {
      font-family: var(--corp-font-family);
      font-size: var(--corp-type-mobile-heading-xxl-font-size);
      font-weight: var(--corp-type-mobile-heading-xxl-font-weight);
      line-height: var(--corp-type-mobile-heading-xxl-line-height);
      letter-spacing: -0.4px;
      color: var(--corp-color-white);

      @media (width >=1200px) {
        font-size: var(--corp-type-desktop-heading-4-font-size);
        font-weight: var(--corp-type-desktop-heading-4-font-weight);
      }
    }

    .slider-cards__card-desc {
      font-family: var(--corp-font-family);
      font-size: var(--corp-type-desktop-body-3-font-size);
      font-weight: var(--corp-type-desktop-body-3-font-weight);
      line-height: var(--corp-type-desktop-body-3-line-height);
      color: var(--corp-color-white);
    }

    .slider-cards__card-arrow,
    .slider-cards__arrows {
      display: none;
    }

    .slider-cards__dots {
      margin-top: 32px;
    }

    @media (width >=768px) and (width <1200px) {
      --slider-cards-focus-gap: var(--corp-space-lg);
      --slider-cards-peek: 0px;
      --slider-cards-card-aspect: 2 / 3;

      .slider-cards__row {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: var(--corp-space-lg);
        padding: 50px 0 28px;
      }

      .slider-cards__intro {
        flex: 0 0 auto;
        padding-top: 0;
      }

      .slider-cards__subtitle {
        padding-top: var(--corp-space-xl);
      }

      .slider-cards__carousel-col {
        flex: 0 0 auto;
        min-width: 0;
        margin-right: calc(-1 * var(--container-margin));
        padding-bottom: 0;
      }

      .slider-cards__body {
        padding: 0 6px 14px;
        gap: var(--corp-space-xs);
      }

      .slider-cards__card-title :is(h1, h2, h3, h4, h5, h6, p) {
        font-size: var(--corp-type-tablet-heading-2-font-size);
        font-weight: var(--corp-type-tablet-heading-2-font-weight);
        line-height: var(--corp-type-tablet-heading-2-line-height);
        letter-spacing: var(--corp-letter-spacing);
      }

      .slider-cards__card-desc {
        font-size: var(--corp-type-mobile-body-xs-font-size);
        font-weight: var(--corp-type-mobile-body-xs-font-weight);
        line-height: var(--corp-type-desktop-body-3-line-height);
      }

      .slider-cards__dots,
      .slider-cards__card-arrow {
        display: none;
      }

      .slider-cards__arrows {
        display: flex;
        gap: var(--corp-space-lg);
        width: auto;
        margin: 14px 257px 0 0;
      }

      .slider-cards__arrows>.corp-arrow-btn {
        width: var(--corp-space-3xl);
        height: var(--corp-space-3xl);
        background: var(--corp-color-overlay-black-60);
        color: var(--corp-color-white);
        border: none;
        box-shadow: none;
        opacity: 0.4;
      }

      .slider-cards__arrows>.corp-arrow-btn.is-active-direction:not(:disabled),
      .slider-cards__arrows>.corp-arrow-btn:hover:not(:disabled),
      .slider-cards__arrows>.corp-arrow-btn:focus-visible:not(:disabled) {
        background: var(--corp-color-primary);
        color: var(--corp-color-white);
        opacity: 1;
      }

      .slider-cards__arrows>.corp-arrow-btn:disabled {
        opacity: 0.22;
        pointer-events: none;
      }

      .slider-cards__nav-btn::before {
        width: var(--corp-cta-icon-size);
        height: var(--corp-cta-icon-size);
      }
    }

    @media (width >=1200px) {
      --slider-cards-focus-gap: var(--grid-gutter-width);
      --slider-cards-peek: 0px;
      --slider-cards-card-aspect: 4 / 5;

      .slider-cards__row {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 47px;
        padding: 84px 0 165px;
        margin-top: 0;
      }

      .slider-cards__intro {
        flex: 0 0 auto;
        gap: 0;
        margin-block-end: 0;
        padding-top: 92px;
        justify-content: flex-start;
      }

      .slider-cards__carousel-col {
        flex: 0 0 auto;
        min-width: 0;
        margin-right: calc(-1 * var(--container-margin));
        padding-bottom: 0;
      }

      .slider-cards__stage {
        width: calc(100% + var(--container-margin));
        margin-right: calc(-1 * var(--container-margin));
      }

      .slider-cards__subtitle {
        font-size: var(--corp-type-mobile-heading-xl-font-size);
        font-weight: var(--corp-type-desktop-body-5-font-weight);
        line-height: var(--corp-type-desktop-caption-5-line-height);
        letter-spacing: var(--corp-letter-spacing);
        padding-bottom: 0;
        margin-bottom: 20px;
      }

      .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
        font-size: var(--corp-type-desktop-heading-xxl-font-size);
        line-height: var(--corp-type-desktop-heading-xxl-line-height);
        font-weight: var(--corp-type-desktop-heading-xxl-font-weight);
        letter-spacing: -1.5px;
        margin: 0 0 32px;
        padding-bottom: 0;
      }

      .slider-cards__desc {
        font-size: var(--corp-type-desktop-body-3-font-size);
        font-weight: var(--corp-type-desktop-body-3-font-weight);
        line-height: var(--corp-type-desktop-body-3-line-height);
        letter-spacing: -0.14px;

        p {
          color: var(--corp-color-neutral-black);
          padding: 0;
          padding-right: 32px;
        }
      }

      .slider-cards__body {
        padding: 0 var(--corp-space-xl) 28px;
        gap: var(--corp-space-lg);
        margin-right: 40px;
      }

      .slider-cards__card-title {
        font-size: var(--corp-type-desktop-heading-4-font-size);
        font-weight: var(--corp-type-desktop-heading-4-font-weight);
        line-height: var(--corp-type-desktop-heading-4-line-height);
        letter-spacing: -0.4px;
        text-transform: none;
      }

      .slider-cards__card-desc {
        font-size: var(--corp-type-desktop-body-2-font-size);
        font-weight: var(--corp-type-desktop-body-3-font-weight);
        line-height: var(--corp-type-desktop-body-4-line-height);
        letter-spacing: -0.14px;
      }

      .slider-cards__dots,
      .slider-cards__card-arrow {
        display: none;
      }

      .slider-cards__arrows {
        display: flex;
        justify-content: center;
        gap: var(--corp-space-xl);
        width: 100%;
        margin-top: 50px;
        margin-left: -30px;
        margin-bottom: 65px;
      }

      .slider-cards__arrows>.corp-arrow-btn {
        width: var(--corp-arrow-btn-size);
        height: var(--corp-arrow-btn-size);
        background: var(--corp-color-primary);
        color: var(--corp-color-white);
        border: none;
        box-shadow: none;
      }

      .slider-cards__arrows>.corp-arrow-btn.is-active-direction:not(:disabled),
      .slider-cards__arrows>.corp-arrow-btn:hover:not(:disabled),
      .slider-cards__arrows>.corp-arrow-btn:focus-visible:not(:disabled) {
        background: var(--corp-color-primary);
        color: var(--corp-color-white);
        opacity: 1;
      }

      .slider-cards__arrows>.corp-arrow-btn:disabled {
        opacity: 0.22;
        pointer-events: none;
      }

      .slider-cards__nav-btn::before {
        width: 30px;
        height: 30px;
      }

      .slider-cards__inner {
        margin-bottom: 0;
      }
    }
  }
}

.slider-cards.training-page.block,
.slider-cards.sustainability-page.block,
.slider-cards.partners-page.block {
  padding-top: 44px;
  padding-bottom: 40px;

  @media (width >=768px) {
    padding-top: 40px;
    padding-bottom: 71px;
  }

  @media (width >=1200px) {
    padding-top: 130px;
    padding-bottom: 108px;
  }

  .slider-cards__inner {
    padding: 0 var(--container-margin);
    margin: 0;

    @media (width >=768px) {
      padding: 0 0 0 var(--container-margin);
    }

    .slider-cards__row {
      gap: 0;
      padding: 0;

      .slider-cards__intro {
        gap: 0;
        position: relative;

        .slider-cards__arrows {
          position: absolute;
          left: unset;
          right: 0;
          justify-content: flex-end;
          margin: 0;

          .corp-arrow-btn {
            background: var(--corp-color-white);
            border-color: var(--corp-color-white);

            &::before {
              background: url(/corporate/icons/arrow-prev-carousel.svg) no-repeat center / contain;
            }

            &.slider-cards__nav-btn--next::before {
              transform: rotate(180deg);
            }

            &:disabled {
              opacity: 0.35;
              pointer-events: none;
            }
          }

          @media (width >=768px) {
            bottom: 38px;
          }

          @media (width >=1200px) {
            bottom: 73px;
          }
        }

        .slider-cards__title {
          margin-bottom: 16px;

          * {
            font-size: var(--corp-type-mobile-heading-xxl-font-size);
            font-weight: var(--corp-type-mobile-heading-xxl-font-weight);
            line-height: var(--corp-type-mobile-heading-xxl-line-height);
            color: var(--corp-color-neutral-black);
            margin: 0;
          }

          @media (width >=768px) {
            * {
              font-size: var(--corp-type-mobile-heading-2-medium-font-size);
              font-weight: var(--corp-type-mobile-heading-2-medium-font-weight);
              line-height: var(--corp-type-mobile-heading-2-medium-line-height);
            }
          }

          @media (width >=1200px) {
            * {
              font-size: var(--corp-type-desktop-heading-4-font-size);
              line-height: var(--corp-type-desktop-heading-4-line-height);
            }
          }
        }

        .slider-cards__desc {
          margin-bottom: 35px;

          * {
            font-size: var(--corp-type-mobile-body-2-font-size);
            font-weight: var(--corp-type-mobile-body-2-font-weight);
            line-height: var(--corp-type-mobile-body-2-line-height);
            color: var(--corp-color-neutral-black);
          }

          @media (width >=768px) {
            margin-bottom: 20px;

            * {
              font-size: var(--corp-type-mobile-body-sm-2-font-size);
              line-height: var(--corp-type-mobile-body-sm-2-line-height);
            }
          }

          @media (width >=1200px) {
            margin-bottom: 50px;

            * {
              font-size: var(--corp-type-desktop-body-font-size);
              line-height: var(--corp-type-hero-line-height-24);
            }
          }
        }
      }

      .slider-cards__carousel-col {
        padding: 0;

        .slider-cards__carousel {
          .slider-cards__stage {
            @media (width < 768px) {
              width: 100%;
            }

            .slider-cards__splide {
              .splide__list {
                .splide__slide {
                  width: 100%;

                  .slider-cards__card {
                    aspect-ratio: unset;

                    .slider-cards__card-arrow {
                      display: none;
                    }

                    .slider-cards__body {

                      padding: 0 16px 16px;

                      * {
                        font-size: var(--corp-type-mobile-body-1-font-size);
                        font-weight: var(--corp-type-mobile-body-1-font-weight);
                        line-height: var(--corp-type-mobile-body-1-line-height);
                      }

                      @media (width >=768px) {
                        padding: 0 11px 11px;

                        * {
                          font-size: var(--corp-type-tablet-heading-1-font-size);
                          line-height: var(--corp-type-desktop-heading-6-line-height);
                        }
                      }

                      @media (width >=1200px) {
                        padding: 0 20px 20px;

                        * {
                          font-size: var(--corp-type-desktop-caption-1-font-size);
                          font-weight: var(--corp-type-desktop-caption-1-font-weight);
                          line-height: var(--corp-type-hero-line-height-24);
                        }
                      }
                    }

                    .slider-cards__media {
                      position: relative;

                      .slider-cards__picture {
                        position: relative;
                        background: unset;

                        img {
                          height: auto;
                          background: unset;
                        }
                      }
                    }

                    .slider-cards__overlay {
                      background: unset;
                      background-blend-mode: unset;
                      position: absolute;
                      bottom: 0;
                      left: 0;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.slider-cards.training-page.block {
  padding-top: 51px;
  padding-bottom: 48px;

  @media (width >=768px) {
    padding-top: 64px;
    padding-bottom: 63px;
  }

  @media (width >=1200px) {
    padding-top: 125px;
    padding-bottom: 166px;
  }

  .slider-cards__inner {
    .slider-cards__row {
      .slider-cards__intro {
        .slider-cards__arrows {
          bottom: 32px;

          @media (width >=768px) {
            bottom: 24px;
          }

          @media (width >=1200px) {
            bottom: 40px;
          }
        }

        .slider-cards__subtitle {
          margin-bottom: 16px;

          * {
            opacity: 0.4;
            font-size: var(--corp-type-mobile-tag-1-font-size);
            font-weight: var(--corp-type-mobile-tag-1-font-weight);
            line-height: var(--corp-type-mobile-tag-1-line-height);
            color: var(--corp-color-neutral-black);
          }

          @media (width >=768px) {
            * {
              font-size: var(--corp-type-mobile-tag-1-font-size);
              line-height: var(--corp-type-desktop-body-2xs-line-height);
            }
          }

          @media (width >=1200px) {
            margin-bottom: 20px;

            * {
              font-size: var(--corp-type-desktop-heading-4-font-size);
              line-height: var(--corp-type-desktop-heading-4-line-height);
            }
          }
        }

        .slider-cards__title {
          margin-bottom: 16px;

          * {
            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-5-line-height);
          }

          strong {
            color: var(--corp-color-primary);
          }

          @media (width >=1200px) {
            * {
              font-size: var(--corp-type-desktop-heading-xxl-font-size);
              line-height: var(--corp-type-desktop-heading-xxl-line-height);
            }
          }
        }

        .slider-cards__desc {
          margin-bottom: 32px;

          * {
            font-size: var(--corp-type-mobile-body-2-font-size);
            font-weight: var(--corp-type-mobile-body-2-font-weight);
            line-height: var(--corp-type-mobile-body-2-line-height);
          }

          @media (width >=768px) {
            margin-bottom: 24px;

            * {
              font-size: var(--corp-type-tablet-body-sm-2-font-size);
              line-height: var(--corp-type-tablet-body-sm-2-line-height);
            }
          }

          @media (width >=1200px) {
            margin-bottom: 40px;

            * {
              font-size: var(--corp-type-mobile-tag-1-font-size);
              line-height: var(--corp-type-mobile-body-1-line-height);
            }
          }
        }
      }

      .slider-cards__carousel-col {
        .slider-cards__carousel {
          .slider-cards__stage {
            .slider-cards__splide {
              .splide__list {
                .splide__slide {
                  .slider-cards__card {
                    .slider-cards__body {
                      gap: 12px;

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

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

                      .slider-cards__card-title {
                        * {
                          font-size: var(--corp-type-mobile-heading-2-medium-font-size);
                          font-weight: var(--corp-type-mobile-heading-2-medium-font-weight);
                          line-height: var(--corp-type-mobile-heading-2-medium-line-height);

                          @media (width >=768px) {
                            font-size: var(--corp-type-mobile-tag-1-font-size);
                            line-height: var(--corp-type-desktop-body-2xs-line-height);
                          }

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

                      .slider-cards__card-desc {
                        * {
                          font-size: var(--corp-type-mobile-body-2-font-size);
                          font-weight: var(--corp-type-mobile-body-2-font-weight);
                          line-height: var(--corp-type-mobile-body-2-line-height);

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

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

/* Recognition & Awards variation */
.slider-cards {
  &.recognition-awards {
    --slider-cards-peek: 68px;
    --slider-cards-card-aspect: 248 / 220;

    padding-top: var(--corp-space-3xl);
    background: var(--corp-color-white);

    .slider-cards__row {
      display: flex;
      flex-direction: column;
      padding: var(--corp-space-lg) 0 var(--corp-space-xl);
    }

    .slider-cards__body {
      padding: 0;
      gap: 0;
    }

    .slider-cards__intro {
      margin-block-end: 18px;
      max-width: none;
    }

    .slider-cards__subtitle,
    .slider-cards__desc {
      display: none;
    }

    .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
      margin: 0;
      color: var(--corp-color-neutral-black);
      font-family: var(--corp-font-family);
      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-5-line-height);
      letter-spacing: -0.56px;

      strong {
        color: var(--corp-color-primary);
        font-weight: inherit;
      }
    }

    .slider-cards__carousel-col {
      width: 100%;
      max-width: none;
      margin: 0;
      padding-bottom: 0;
    }

    .slider-cards__card {
      aspect-ratio: var(--slider-cards-card-aspect);
      border-radius: var(--corp-radius-md);
      box-shadow: none;
      background: var(--corp-color-slate);
    }

    .slider-cards__overlay {
      background:
        linear-gradient(0deg, var(--corp-color-overlay-black-50) 0%, rgb(0 0 0 / 0%) 32.8%), linear-gradient(0deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 20%) 100%);
      background-blend-mode: normal;
    }

    .slider-cards__card-title {
      color: var(--corp-color-white);
      font-family: var(--corp-font-family);
      font-size: var(--corp-type-mobile-body-sm-font-size);
      font-weight: var(--corp-type-mobile-body-sm-font-weight);
      line-height: var(--corp-type-desktop-body-5-line-height);
      letter-spacing: -0.24px;
      padding: 18px 36px 12px 14px;
    }

    .slider-cards__card-desc {
      font-family: var(--corp-font-family);
      font-size: var(--corp-type-mobile-body-xs-font-size);
      font-weight: var(--corp-type-mobile-body-xs-font-weight);
      line-height: var(--corp-type-mobile-body-xs-line-height);
    }

    .slider-cards__card-arrow,
    .slider-cards__arrows {
      display: none;
    }

    .slider-cards__dots {
      display: flex;
      justify-content: center;
      gap: var(--corp-space-sm);
      margin-top: 26px;
    }

    .slider-cards__dot {
      width: 7px;
      height: 7px;
      background: rgb(23 28 143 / 20%);
      cursor: pointer;

      &:hover,
      &:focus-visible,
      &.is-active {
        width: var(--corp-space-sm);
        height: var(--corp-space-sm);
        background: var(--corp-color-primary);
      }
    }

    @media (width >=768px) {
      padding: 0;
      gap: 0;

      .slider-cards__row {
        padding: 50px 0 36px;
      }

      .slider-cards__intro {
        position: relative;
      }

      .slider-cards__subtitle {
        display: block;
        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);
        color: var(--corp-color-overlay-black-60);
      }

      .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
        letter-spacing: -0.42px;
      }

      .slider-cards__overlay {
        background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 20%) 50%, var(--corp-color-overlay-black-80) 100%);
      }

      .slider-cards__arrows {
        display: flex;
        position: absolute;
        top: -102px;
        right: 0;
        justify-content: flex-end;
        gap: var(--corp-space-md);
      }

      .slider-cards__arrows>.corp-arrow-btn {
        width: 16px;
        height: 16px;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;

        svg {
          display: none;
        }
      }

      .slider-cards__nav-btn--prev::before,
      .slider-cards__nav-btn--next::before {
        content: '';
        display: block;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }

      .slider-cards__nav-btn--prev::before {
        background-image: url('/corporate/icons/arrow-prev-carousel.svg');
      }

      .slider-cards__nav-btn--next::before {
        background-image: url('/corporate/icons/arrow-next-carousel.svg');
      }

      .slider-cards__arrows>.corp-arrow-btn:hover,
      .slider-cards__arrows>.corp-arrow-btn:focus-visible,
      .slider-cards__arrows>.corp-arrow-btn:active {
        background: transparent;
        box-shadow: none;
        border: none;
      }

      .slider-cards__dots,
      .slider-cards__card-arrow {
        display: none;
      }
    }

    @media (width >=1200px) {
      .slider-cards__carousel-col {
        margin: 0;
      }

      .slider-cards__row {
        padding: 107px 0 94px;
      }

      .slider-cards__subtitle {
        display: none;
      }

      .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
        font-size: var(--corp-type-desktop-heading-xxl-font-size);
        font-weight: var(--corp-type-desktop-heading-xxl-font-weight);
        line-height: var(--corp-type-desktop-heading-xxl-line-height);
        letter-spacing: -1.5px;
        margin: 0;
      }

      .slider-cards__card-title,
      .slider-cards__card-title :is(h1, h2, h3, h4, h5, h6, p) {
        font-size: var(--corp-type-desktop-heading-4-font-size);
        font-weight: var(--corp-type-desktop-heading-4-font-weight);
        line-height: var(--corp-type-desktop-heading-4-line-height);
        letter-spacing: -0.4px;
        margin: 0;
        padding: 0px 11px 11px;
      }

      .slider-cards__inner {
        margin-bottom: 0;
      }

      .slider-cards__dots,
      .slider-cards__card-arrow {
        display: none;
      }

      .slider-cards__arrows {
        width: 30px;
        height: 30px;
        position: absolute;
        left: unset;
        right: 0;
        justify-content: flex-end;
        margin: 0;
      }
    }
  }
}

.slider-cards.partners-page.block {
  padding-top: 80px;
  padding-bottom: 82px;

  .slider-cards__inner {
    .slider-cards__row {
      .slider-cards__intro {
        .slider-cards__partners-intro-row {
          width: 100%;
        }

        .slider-cards__subtitle {
          margin-bottom: 16px;

          * {
            opacity: 0.4;
            font-size: var(--corp-type-mobile-body-1-font-size);
            font-weight: var(--corp-type-mobile-body-3-font-weight);
            line-height: var(--corp-type-mobile-heading-2-medium-line-height);
            text-transform: uppercase;
          }
        }

        .slider-cards__title {
          margin-bottom: 16px;

          * {
            font-size: var(--corp-type-mobile-display-2-font-size);
            line-height: var(--corp-type-mobile-display-5-line-height);
            letter-spacing: -0.56px;
          }

          strong {
            color: var(--corp-color-primary);
          }
        }

        .slider-cards__desc {
          margin-bottom: 32px;

          * {
            color: var(--corp-color-neutral-black-3);
            letter-spacing: -0.14px;
          }
        }
      }

      .slider-cards__carousel-col {
        .slider-cards__carousel {
          .slider-cards__stage {
            .slider-cards__splide {
              .splide__list {
                gap: 0;

                .splide__slide {
                  .slider-cards__card {
                    border-radius: 12px;

                    .slider-cards__overlay {
                      background: linear-gradient(0deg, rgb(0 0 0 / 30%) 0%, rgb(0 0 0 / 30%) 100%);
                    }

                    .slider-cards__media,
                    .slider-cards__picture {
                      height: 100%;
                    }

                    .slider-cards__media {
                      .slider-cards__picture {
                        img {
                          border-radius: 12px;
                        }
                      }
                    }

                    .slider-cards__body {
                      padding: 0 15px 20px;
                      gap: 6px;

                      .slider-cards__card-title {
                        * {
                          font-size: var(--corp-type-mobile-body-3-font-size);
                        }
                      }

                      .slider-cards__card-desc {
                        margin-bottom: 16px;

                        * {
                          font-size: var(--corp-type-mobile-body-3-font-size);
                          font-weight: var(--corp-type-mobile-body-3-font-weight);
                        }
                      }

                      .corp-cta--tertiary {
                        padding: 12px 24px;
                        width: fit-content;
                        color: var(--corp-color-white);
                        border-radius: 0;
                        background: var(--corp-color-primary);
                        border: 1px solid var(--corp-color-primary);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  @media (width >=768px) {
    padding-top: 0px;
    padding-bottom: 152px;
    padding-left: 0px;

    .slider-cards__inner {
      .slider-cards__row {
        .slider-cards__intro {
          .slider-cards__subtitle {
            * {
              color: var(--corp-color-overlay-black-60);
              opacity: 1;
              font-size: var(--corp-type-tablet-heading-1-font-size);
              line-height: var(--corp-type-tablet-body-8-line-height);
            }
          }

          .slider-cards__title {
            * {
              font-weight: var(--corp-type-tablet-display-font-weight);
              letter-spacing: -0.42px;
            }
          }

          .slider-cards__desc {
            margin-bottom: 24px;

            * {
              font-size: var(--corp-type-tablet-body-sm-font-size);
              font-weight: var(--corp-type-tablet-body-sm-font-weight);
              line-height: var(--corp-type-tablet-body-sm-3-line-height);
              letter-spacing: -0.3px;
            }
          }
        }

        .slider-cards__carousel-col {
          .slider-cards__carousel {
            .slider-cards__stage {
              .slider-cards__splide {
                .splide__list {
                  .splide__slide {
                    .slider-cards__card {
                      .slider-cards__body {
                        padding: 0 16px 14px;
                        gap: 0;

                        .slider-cards__card-title {
                          margin-bottom: 10px;

                          * {
                            line-height: var(--corp-type-tablet-body-8-line-height);
                          }
                        }

                        .slider-cards__card-desc {
                          margin-bottom: 0;

                          * {
                            font-size: var(--corp-type-tablet-body-1-font-size);
                            line-height: var(--corp-type-tablet-body-8-line-height);
                            letter-spacing: -0.36px;
                          }
                        }

                        .corp-cta--tertiary {
                          position: absolute;
                          right: 12px;
                          bottom: 14px;
                          width: auto;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  @media (width >=1200px) {
    padding: 0 0 277px;

    .slider-cards__inner {
      .slider-cards__row {
        .slider-cards__intro {
          .slider-cards__subtitle {
            margin-bottom: 20px;

            * {
              color: var(--corp-color-neutral-black);
              opacity: 0.4;
              font-size: var(--corp-type-desktop-heading-4-font-size);
              line-height: var(--corp-type-desktop-heading-3xl-line-height);
              letter-spacing: -0.4px;
            }
          }

          .slider-cards__title {
            margin-bottom: 21px;

            * {
              font-size: var(--corp-type-desktop-heading-xxl-font-size);
              line-height: var(--corp-type-desktop-heading-4xxl-line-height);
              letter-spacing: -1.5px;
            }
          }

          .slider-cards__desc {
            margin-bottom: 40px;

            * {
              font-size: var(--corp-type-desktop-body-3-font-size);
              font-weight: var(--corp-type-desktop-body-3-font-weight);
              line-height: var(--corp-type-desktop-caption-7-line-height);
              letter-spacing: 0;
            }
          }
        }

        .slider-cards__carousel-col {
          .slider-cards__carousel {
            .slider-cards__stage {
              .slider-cards__splide {
                .splide__list {
                  .splide__slide {
                    .slider-cards__card {
                      .slider-cards__body {
                        padding: 0 23px 24px;
                        gap: 0;

                        .slider-cards__card-title {
                          margin-bottom: 16px;

                          * {
                            font-size: var(--corp-type-desktop-heading-4-font-size);
                            font-weight: var(--corp-type-desktop-heading-4-font-weight);
                            line-height: var(--corp-type-desktop-heading-3xl-line-height);
                            letter-spacing: -0.4px;
                          }
                        }

                        .slider-cards__card-desc {
                          * {
                            line-height: var(--corp-type-desktop-body-xs-line-height);
                            letter-spacing: -0.18px;
                          }
                        }

                        .corp-cta--tertiary {
                          right: 24px;
                          bottom: 24px;
                          font-size: var(--corp-type-cta-font-size);
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/* Impact Page Careers variation */
.slider-cards.impact-page-careers {
  --slider-cards-peek: 48px;
  position: relative;
  padding: 60px 0 82px;

  .slider-cards__background {
    position: absolute;
    inset: 0;
  }

  .slider-cards__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .slider-cards__inner {
    position: relative;
    margin: 0;
  }

  .slider-cards__row {
    align-items: stretch;
    gap: 0;
    padding: 0;
  }

  .slider-cards__intro {
    align-items: center;
    gap: 0;
    margin-bottom: 40px;
  }

  .slider-cards__subtitle {
    margin-bottom: 16px;
    opacity: 0.6;
  }

  .slider-cards__subtitle :is(h1, h2, h3, h4, h5, h6, p) {
    margin: 0;
    color: var(--corp-color-white);
    text-align: center;
    font-size: var(--corp-type-mobile-body-1-font-size);
    font-weight: var(--corp-type-mobile-body-3-font-weight);
    line-height: var(--corp-type-mobile-body-1-line-height);
    text-transform: uppercase;
  }

  .slider-cards__title {
    margin-bottom: 16px;
  }

  .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
    margin: 0;
    color: var(--corp-color-white);
    text-align: center;
    font-size: var(--corp-type-mobile-display-1-font-size);
    font-weight: var(--corp-type-mobile-display-1-font-weight);
    line-height: var(--corp-type-mobile-display-5-line-height);
  }

  .slider-cards__desc {
    color: var(--corp-color-overlay-white-70);
    text-align: center;
    font-weight: var(--corp-type-mobile-body-3-font-weight);
    line-height: var(--corp-type-mobile-body-2-line-height);
    letter-spacing: 0;
  }

  .slider-cards__carousel-col {
    padding-bottom: 0;
  }

  .slider-cards__stage {
    width: 100%;
  }

  .slider-cards__splide .splide__slide {
    display: flex;
  }

  .slider-cards__article {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .slider-cards__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    padding: 12px 12px 24px;
    aspect-ratio: auto;
    border-radius: 20px;
    background: var(--corp-color-white);
    color: var(--corp-color-neutral-black);
  }

  .slider-cards__card-cta {
    align-self: flex-start;
  }

  .slider-cards__card-title,
  .slider-cards__card-desc {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .slider-cards__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 271 / 177;
    border-radius: 10px;
    overflow: hidden;
  }

  .slider-cards__picture {
    background: none;
    position: static;
  }

  .slider-cards__picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: none;
  }

  .slider-cards__overlay,
  .slider-cards__card-arrow,
  .slider-cards__arrows {
    display: none;
  }

  .slider-cards__card-eyebrow {
    position: absolute;
    top: 15px;
    left: 16px;
    display: inline-flex;
    justify-content: center;
    padding: 8px;
    border-radius: 5px;
    background: rgb(0 0 0 / 30%);
    color: var(--corp-color-white);
    text-align: center;
    font-size: var(--corp-type-mobile-body-sm-font-size);
    font-weight: var(--corp-type-mobile-body-sm-font-weight);
    line-height: var(--corp-type-mobile-body-sm-2-line-height);
  }

  .slider-cards__body {
    position: relative;
    gap: 0;
    padding: 16px 0 0;
    color: var(--corp-color-neutral-black);
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .slider-cards__card-title :is(h1, h2, h3, h4, h5, h6, p) {
    margin-bottom: 12px;
    color: var(--corp-color-neutral-black);
    font-size: var(--corp-type-mobile-heading-3-bold-font-size);
    font-weight: var(--corp-type-mobile-heading-3-bold-font-weight);
    line-height: var(--corp-type-mobile-body-1-line-height);
  }

  .slider-cards__card-desc {
    margin-bottom: 32px;
    color: var(--corp-color-neutral-black);
    font-size: var(--corp-type-mobile-body-1-font-size);
    font-weight: var(--corp-type-mobile-body-3-font-weight);
    line-height: var(--corp-type-mobile-body-1-line-height);
    opacity: 0.6;
  }

  .slider-cards__card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: auto;
    font-size: var(--corp-type-mobile-heading-3-bold-font-size);
    font-weight: var(--corp-type-cta-2-font-weight);
    line-height: var(--corp-type-cta-3-line-height);
  }

  .slider-cards__card-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    background: center / contain no-repeat url('/corporate/icons/arrow-diagonal-blue.svg');
  }

  .slider-cards__dots {
    margin-top: 32px;
  }

  .slider-cards__dot {
    background: var(--corp-color-overlay-white-70);
  }

  .slider-cards__dot.is-active {
    background: var(--corp-color-white);
  }

  @media (width >=768px) {
    padding: 45px 0 81.5px;

    .slider-cards__inner {
      padding: 0 32px 0 34px;
    }

    .slider-cards__intro {
      margin-bottom: 42px;
    }

    .slider-cards__subtitle {
      margin-bottom: 16px;
      opacity: 0.5;
    }

    .slider-cards__subtitle :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--corp-type-tablet-body-1-font-size);
      line-height: var(--corp-type-tablet-body-7-line-height);
      letter-spacing: -0.12px;
    }

    .slider-cards__title {
      margin-bottom: 16px;
    }

    .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--corp-type-tablet-display-font-size);
      line-height: var(--corp-type-tablet-display-3xl-line-height);
      letter-spacing: -0.42px;
    }

    .slider-cards__desc {
      font-size: var(--corp-type-tablet-body-1-font-size);
      line-height: var(--corp-type-tablet-body-10-line-height);
      letter-spacing: -0.24px;
    }

    .slider-cards__card {
      padding: 5.62px 5.62px 16.87px;
      border-radius: 8.996px;
    }

    .slider-cards__media {
      aspect-ratio: 107 / 57;
      border-radius: 5.622px;
    }

    .slider-cards__card-eyebrow {
      top: 8.43px;
      left: 9px;
      padding: 4.5px;
      border-radius: 3px;
      font-size: var(--corp-type-tablet-body-sm-font-size);
      line-height: var(--corp-type-tablet-body-sm-3-line-height);
    }

    .slider-cards__body {
      padding-top: 13.5px;
    }

    .slider-cards__card-title :is(h1, h2, h3, h4, h5, h6, p) {
      margin-bottom: 11.5px;
      font-size: var(--corp-type-tablet-body-1-font-size);
      font-weight: var(--corp-type-tablet-body-2-font-weight);
      line-height: var(--corp-type-tablet-body-8-line-height);
      letter-spacing: -0.36px;
    }

    .slider-cards__card-desc {
      margin-bottom: 60px;
      color: var(--corp-color-overlay-black-60);
      font-size: var(--corp-type-tablet-body-sm-font-size);
      font-weight: var(--corp-type-tablet-body-sm-font-weight);
      line-height: var(--corp-type-tablet-body-sm-3-line-height);
    }

    .slider-cards__card-cta {
      gap: 6.75px;
      font-size: var(--corp-type-tablet-body-sm-font-size);
      font-weight: var(--corp-type-tablet-body-sm-font-weight);
      line-height: var(--corp-type-tablet-body-sm-3-line-height);
      letter-spacing: -0.3px;
    }

    .slider-cards__card-cta-icon {
      width: 6px;
      height: 6px;
    }

    .slider-cards__dots {
      display: none;
    }
  }

  @media (width >=1200px) {
    padding: 80px 0 101px;

    .slider-cards__inner {
      padding: 0 var(--container-margin);
    }

    .slider-cards__intro {
      margin-bottom: 56px;
    }

    .slider-cards__subtitle {
      margin-bottom: 24px;
    }

    .slider-cards__subtitle :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--corp-type-desktop-heading-4-font-size);
      line-height: var(--corp-type-desktop-heading-3xl-line-height);
      letter-spacing: -0.4px;
    }

    .slider-cards__title {
      margin-bottom: 24px;
    }

    .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--corp-type-desktop-heading-xxl-font-size);
      line-height: var(--corp-type-desktop-heading-4xxl-line-height);
      letter-spacing: -1.5px;
    }

    .slider-cards__desc>p {
      font-weight: var(--corp-type-desktop-body-3-font-weight);
      line-height: var(--corp-type-desktop-heading-6-line-height);
      letter-spacing: 0.16px;
    }

    .slider-cards__card {
      padding: 10px 10px 24px;
      border-radius: 16px;
    }

    .slider-cards__media {
      aspect-ratio: 383 / 203;
      border-radius: 10px;
    }

    .slider-cards__card-eyebrow {
      top: 15px;
      left: 16px;
      padding: 8px;
      border-radius: 5px;
      font-size: var(--corp-type-desktop-body-lg-font-size);
      line-height: var(--corp-type-desktop-heading-6-line-height);
    }

    .slider-cards__body {
      padding-top: 24px;
    }

    .slider-cards__card-title :is(h1, h2, h3, h4, h5, h6, p) {
      margin-bottom: 20px;
      font-size: var(--corp-type-desktop-heading-3-font-size);
      font-weight: var(--corp-type-desktop-heading-3-font-weight);
      line-height: var(--corp-type-desktop-caption-5-line-height);
      letter-spacing: -0.22px;
    }

    .slider-cards__card-desc p {
      margin-bottom: 16px;
      font-size: var(--corp-type-desktop-body-3-font-size);
      font-weight: var(--corp-type-desktop-body-3-font-weight);
      line-height: var(--corp-type-desktop-caption-7-line-height);
    }

    .slider-cards__card-cta {
      gap: 12px;
      font-size: var(--corp-type-desktop-body-font-size);
      font-style: normal;
      font-weight: var(--fw-400);
      line-height: 150%;
      /* 24px */
      letter-spacing: -0.16px;
    }

    .slider-cards__card-cta-icon {
      width: 10px;
      height: 10px;
    }
  }
}

/* Why Choose CNG variation */
.slider-cards.why-choose-cng,
.slider-cards.business-opportunity {
  background: var(--corp-color-white);

  .slider-cards__row {
    gap: 0;
    padding: 0;
  }

  .slider-cards__intro {
    gap: 0;
  }

  .slider-cards__subtitle :is(h1, h2, h3, h4, h5, h6, p) {
    color: var(--corp-color-neutral-black);
    font-size: var(--corp-type-mobile-body-1-font-size);
    font-weight: var(--corp-type-mobile-body-3-font-weight);
    line-height: var(--corp-type-mobile-heading-2-medium-line-height);
    text-transform: uppercase;
    text-align: center;
    opacity: 0.4;
    margin: 0;
    padding-top: 80px;
    padding-bottom: 16px;
  }

  .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
    color: var(--corp-color-neutral-black);
    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-5-line-height);
    letter-spacing: -0.56px;
    text-align: center;
    margin: 0;
    padding-bottom: 47px;

    strong {
      color: var(--corp-color-primary);
    }
  }

  .slider-cards__carousel-col {
    margin-right: 0;
    padding-bottom: 71px;
  }

  .slider-cards__stage {
    width: 100%;
  }

  .slider-cards__card {
    aspect-ratio: 335 / 209;
  }

  .slider-cards__overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44.72%, rgba(0, 0, 0, 0.8) 100%);
  }

  .slider-cards__body {
    padding: 0 34px 16px 16px;
    gap: 12px;
  }

  .slider-cards__card-title :is(h1, h2, h3, h4, h5, h6, p) {
    color: var(--corp-color-white);
    font-size: var(--corp-type-mobile-heading-2-medium-font-size);
    font-weight: var(--corp-type-mobile-heading-2-medium-font-weight);
    line-height: var(--corp-type-mobile-heading-2-medium-line-height);
    margin: 0;
  }

  .slider-cards__card-desc {
    color: var(--corp-color-white);
    font-size: var(--corp-type-mobile-body-1-font-size);
    font-weight: var(--corp-type-mobile-body-1-font-weight);
    line-height: var(--corp-type-mobile-body-3-line-height);
    letter-spacing: -0.14px;
  }

  .slider-cards__card-arrow {
    display: none;
  }

  .slider-cards__dots {
    margin-top: 24px;
    gap: 8px;
  }

  .slider-cards__arrows {
    display: none;
  }

  .slider-cards__slide {
    position: relative;
    border-radius: var(--corp-radius-md);
    overflow: hidden;
  }

  .slider-cards__slide .slider-cards__picture,
  .slider-cards__media {
    position: static;
    background: none;
  }

  /* ---- Tablet >= 768px ---- */
  @media (width >=768px) {
    .slider-cards__subtitle :is(h1, h2, h3, h4, h5, h6, p) {
      color: var(--corp-color-overlay-black-60);
      font-size: var(--corp-type-tablet-body-1-font-size);
      line-height: var(--corp-type-tablet-body-5xl-line-height);
      letter-spacing: -0.12px;
      opacity: 1;
      padding-top: 51px;
      padding-bottom: 16px;
    }

    .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--corp-type-tablet-display-font-size);
      line-height: var(--corp-type-tablet-display-3xl-line-height);
      letter-spacing: -0.42px;
      padding-bottom: 37px;
    }

    .splide__list {
      display: flex;
      gap: 7px;
      padding-bottom: 7px;
      flex-wrap: wrap;
    }

    .splide__track {
      padding-right: 0;
    }

    .slider-cards__slide:nth-child(1),
    .slider-cards__slide:nth-child(4) {
      flex: 0 0 calc(58.39% - 3.5px);
      aspect-ratio: 421 / 202;

      .slider-cards__card {
        aspect-ratio: 421 / 202;
      }
    }

    .slider-cards__slide:nth-child(2),
    .slider-cards__slide:nth-child(3) {
      flex: 0 0 calc(41.61% - 3.5px);
      aspect-ratio: 300 / 202;

      .slider-cards__card {
        aspect-ratio: 300 / 202;
      }
    }

    .slider-cards__slide .slider-cards__body {
      padding: 0 16px 16px;
      gap: 6px;
    }

    .slider-cards__slide .slider-cards__card-title :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--corp-type-tablet-heading-1-font-size);
      line-height: var(--corp-type-tablet-body-8-line-height);
    }

    .slider-cards__slide .slider-cards__card-desc {
      font-size: var(--corp-type-tablet-body-sm-font-size);
      line-height: var(--corp-type-tablet-body-sm-3-line-height);
      letter-spacing: -0.3px;
    }

    .slider-cards__dots,
    .slider-cards__arrows {
      display: none;
    }
  }

  /* ---- Desktop >= 1200px ---- */
  @media (width >=1200px) {

    .slider-cards__subtitle :is(h1, h2, h3, h4, h5, h6, p) {
      color: var(--corp-color-neutral-black);
      font-size: var(--corp-type-desktop-heading-4-font-size);
      line-height: var(--corp-type-desktop-heading-3xl-line-height);
      letter-spacing: -0.4px;
      opacity: 0.4;
      padding-top: 180px;
      padding-bottom: 24px;
    }

    .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--corp-type-desktop-heading-xxl-font-size);
      line-height: var(--corp-type-desktop-heading-4xxl-line-height);
      letter-spacing: -1.5px;
      color: var(--corp-color-primary);
      padding-bottom: 60px;
    }

    .splide__list {
      gap: 12px;
      padding-bottom: 0;
    }

    .slider-cards__slide:nth-child(1),
    .slider-cards__slide:nth-child(4) {
      flex: 0 0 calc(58.43% - 6px);
      aspect-ratio: 721 / 346;

      .slider-cards__card {
        aspect-ratio: 721 / 346;
      }
    }

    .slider-cards__slide:nth-child(2),
    .slider-cards__slide:nth-child(3) {
      flex: 0 0 calc(41.57% - 6px);
      aspect-ratio: 513 / 346;

      .slider-cards__card {
        aspect-ratio: 513 / 346;
      }
    }

    .slider-cards__slide .slider-cards__body {
      padding: 0 24px 24px;
    }

    .slider-cards__slide .slider-cards__card-title :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--corp-type-desktop-heading-4-font-size);
      line-height: var(--corp-type-desktop-heading-3xl-line-height);
      letter-spacing: -0.4px;
    }

    .slider-cards__slide .slider-cards__card-desc {
      font-size: var(--corp-type-desktop-body-xs-font-size);
      line-height: var(--corp-type-desktop-body-xs-line-height);
      letter-spacing: -0.18px;
    }
  }
}

/* overrides business opportunity  */
.slider-cards.business-opportunity {
  padding-block: 100px;

  .slider-cards__card {
    aspect-ratio: 324 / 494;
  }

  .slider-cards__dots {
    display: none;
  }

  @media (min-width: 768px) {

    .slider-cards__card {
      aspect-ratio: 402 / 344;
    }

    .slider-cards__slide .slider-cards__picture,
    .slider-cards__media {
      position: absolute;
      border-radius: var(--corp-radius-xsmd);
    }

    .slider-cards__article {
      height: 100%;
    }

    .slider-cards__card {
      aspect-ratio: unset;
      height: 100%;
    }

    .slider-cards__carousel-col {
      width: 100%;
    }

    .splide__slide:nth-child(1),
    .splide__slide:nth-child(2) {
      aspect-ratio: unset;
    }

    .splide__slide:nth-child(3),
    .splide__slide:nth-child(4),
    .splide__slide:nth-child(5) {
      aspect-ratio: unset;
      flex: 0 0 calc(33.38% - 6px);
    }
  }

  @media (min-width: 1200px) {
    .slider-cards__card-title :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--corp-type-desktop-heading-4-font-size);
    }

    .splide__list {
      gap: 24px;
    }

    .slider-cards__slide .slider-cards__picture,
    .slider-cards__media {
      border-radius: var(--corp-radius-sm);
    }

    .slider-cards__slide:nth-child(1) {
      flex: 0 0 calc(56.43% - 6px);
    }

    .splide__slide:nth-child(3),
    .splide__slide:nth-child(4),
    .splide__slide:nth-child(5) {
      flex: 0 0 calc(32.38% - 6px);
    }
  }
}


/* Safety stacked cards: Maruti Suzuki Safety + Covid Safety */
.slider-cards {

  &.safety-page,
  &.covid-page {
    background: var(--corp-color-white);

    .slider-cards__row {
      gap: 0;
      padding: 0;
    }

    .slider-cards__intro {
      gap: 0;
    }

    .slider-cards__carousel-col {
      margin-right: 0;
      padding-bottom: 0;
    }

    .slider-cards__stage {
      width: 100%;
      margin-right: 0;
    }

    .slider-cards__splide .splide__track {
      padding-right: 0;
    }

    .slider-cards__stacked-list {
      margin: 0;
    }

    .slider-cards__card {
      aspect-ratio: 335 / 284;
      border-radius: 8px;
      box-shadow: none;
    }

    .slider-cards__overlay {
      background: linear-gradient(180deg, rgb(0 0 0 / 0%) 44.72%, rgb(0 0 0 / 80%) 100%);
    }

    .slider-cards__card-arrow,
    .slider-cards__arrows,
    .slider-cards__dots {
      display: none;
    }

    .slider-cards__body {
      min-width: 0;
      padding: 0 16px 16px;
      gap: 0;
    }

    .slider-cards__card-title {
      margin-bottom: 12px;

      :is(h1, h2, h3, h4, h5, h6, p) {
        color: var(--corp-color-white);
        font-size: var(--corp-type-mobile-heading-2-medium-font-size);
        font-weight: var(--corp-type-mobile-heading-2-medium-font-weight);
        line-height: var(--corp-type-mobile-heading-2-medium-line-height);
        margin: 0;
      }
    }

    .slider-cards__card-desc {
      max-width: 100%;
      color: var(--corp-color-overlay-white-70);
      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);
    }
  }

  &.safety-page {
    .slider-cards__title {
      margin-top: 39.5px;
      margin-bottom: 16px;

      :is(h1, h2, h3, h4, h5, h6, p) {
        color: var(--corp-color-neutral-black);
        font-size: var(--corp-type-mobile-heading-2-medium-font-size);
        font-weight: var(--corp-type-mobile-heading-2-medium-font-weight);
        line-height: var(--corp-type-mobile-heading-2-medium-line-height);
        margin: 0;
      }
    }

    .slider-cards__desc {
      color: var(--corp-color-neutral-black);
      font-size: var(--corp-type-mobile-body-2-font-size);
      font-weight: var(--corp-type-mobile-body-2-font-weight);
      line-height: var(--corp-type-mobile-body-2-line-height);
      letter-spacing: -0.14px;
      margin-bottom: 35px;
      padding-bottom: 0;
    }
  }

  &.covid-page {
    .slider-cards__subtitle {
      margin-top: 74.5px;
      margin-bottom: 16px;

      :is(h1, h2, h3, h4, h5, h6, p) {
        color: var(--corp-color-overlay-black-60);
        font-size: var(--corp-type-mobile-tag-1-font-size);
        font-weight: var(--corp-type-mobile-tag-1-font-weight);
        line-height: var(--corp-type-mobile-tag-1-line-height);
        text-transform: uppercase;
        margin: 0;
      }
    }

    .slider-cards__title {
      margin-bottom: 32px;

      :is(h1, h2, h3, h4, h5, h6, p) {
        color: var(--corp-color-primary);
        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-5-line-height);
        letter-spacing: -0.56px;
        margin: 0;
      }
    }
  }

  @media (width >=768px) {

    &.safety-page,
    &.covid-page {
      .slider-cards__card {
        aspect-ratio: 89 / 71;
      }

      .slider-cards__body {
        padding: 0 16px 15.21px;
      }

      .slider-cards__card-title {
        margin-bottom: 9.35px;

        :is(h1, h2, h3, h4, h5, h6, p) {
          font-size: var(--corp-type-tablet-heading-2-font-size);
          font-weight: var(--corp-type-tablet-heading-2-font-weight);
          line-height: var(--corp-type-tablet-body-8-line-height);
        }
      }

      .slider-cards__card-desc {
        color: var(--corp-color-white);
        font-size: var(--corp-type-tablet-body-sm-3-font-size);
        font-weight: var(--corp-type-tablet-body-sm-2-font-weight);
        line-height: var(--corp-type-tablet-body-sm-3-line-height);
        letter-spacing: -0.3px;
      }
    }

    &.safety-page {
      .slider-cards__title {
        margin-top: 60px;
        margin-bottom: 12px;

        :is(h1, h2, h3, h4, h5, h6, p) {
          font-size: var(--corp-type-tablet-heading-lg-font-size);
          line-height: var(--corp-type-tablet-body-11-line-height);
        }
      }

      .slider-cards__desc {
        font-size: var(--corp-type-tablet-body-1-font-size);
        line-height: var(--corp-type-tablet-body-8-line-height);
        letter-spacing: -0.36px;
        margin-bottom: 30px;
      }
    }

    &.covid-page {
      .slider-cards__subtitle {
        margin-top: 67px;
        margin-bottom: 16px;

        :is(h1, h2, h3, h4, h5, h6, p) {
          font-size: var(--corp-type-tablet-heading-1-font-size);
          line-height: var(--corp-type-tablet-body-8-line-height);
        }
      }

      .slider-cards__title {
        margin-bottom: 40px;

        :is(h1, h2, h3, h4, h5, h6, p) {
          font-size: var(--corp-type-tablet-display-font-size);
          line-height: var(--corp-type-tablet-display-3xl-line-height);
          letter-spacing: -0.42px;
        }
      }
    }
  }

  @media (width >=1200px) {

    &.safety-page,
    &.covid-page {
      .slider-cards__card {
        aspect-ratio: 205 / 162;
      }

      .slider-cards__body {
        padding: 0 24px 14px;
      }

      .slider-cards__card-title {
        margin-bottom: 16px;

        :is(h1, h2, h3, h4, h5, h6, p) {
          font-size: var(--corp-type-desktop-heading-4-font-size);
          font-weight: var(--corp-type-desktop-heading-4-font-weight);
          line-height: var(--corp-type-desktop-heading-3xl-line-height);
          letter-spacing: -0.4px;
        }
      }

      .slider-cards__card-desc {
        color: var(--corp-color-white);
        font-size: var(--corp-type-desktop-body-xs-font-size);
        font-weight: var(--corp-type-desktop-body-xs-font-weight);
        line-height: var(--corp-type-desktop-body-xs-line-height);
        letter-spacing: -0.18px;
      }
    }

    &.safety-page {
      .slider-cards__title {
        margin-top: 98px;
        margin-bottom: 16px;

        :is(h1, h2, h3, h4, h5, h6, p) {
          font-size: var(--corp-type-desktop-heading-4-font-size);
          line-height: var(--corp-type-desktop-heading-3xl-line-height);
          letter-spacing: -0.4px;
        }
      }

      .slider-cards__desc {
        font-size: var(--corp-type-desktop-body-font-size);
        font-weight: var(--corp-type-desktop-body-font-weight);
        line-height: var(--corp-type-desktop-heading-3xl-line-height);
        letter-spacing: -0.16px;
        margin-bottom: 50px;
      }
    }

    &.covid-page {
      .slider-cards__subtitle {
        margin-top: 36px;
        margin-bottom: 24px;

        :is(h1, h2, h3, h4, h5, h6, p) {
          color: var(--corp-color-neutral-black);
          opacity: 0.4;
          font-size: var(--corp-type-desktop-heading-4-font-size);
          line-height: var(--corp-type-desktop-heading-3xl-line-height);
          letter-spacing: -0.4px;
        }
      }

      .slider-cards__title {
        margin-bottom: 60px;

        :is(h1, h2, h3, h4, h5, h6, p) {
          font-size: var(--corp-type-desktop-heading-xxl-font-size);
          line-height: var(--corp-type-desktop-heading-4xxl-line-height);
          letter-spacing: -1.5px;
        }
      }
    }
  }

  /* Infotainment Features variation */
  &.infotainment-features {
    padding: 19px 0 68px;

    .slider-cards__inner {
      margin-bottom: 0;
    }

    .slider-cards__row {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 0;
    }

    .slider-cards__intro {
      align-items: flex-start;
      gap: 0;
      margin-bottom: 64px;
    }

    .slider-cards__subtitle {
      margin-bottom: 16px;
    }

    .slider-cards__subtitle :is(h1, h2, h3, h4, h5, h6, p) {
      margin: 0;
      font-size: var(--corp-type-mobile-tag-1-font-size);
      font-weight: var(--corp-type-mobile-tag-1-font-weight);
      line-height: var(--corp-type-mobile-tag-1-line-height);
      text-transform: uppercase;
      opacity: 0.4;
    }

    .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
      margin-bottom: 16px;
      color: var(--corp-color-neutral-black);
      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-5-line-height);
      letter-spacing: -0.56px;

      strong {
        color: var(--corp-color-neutral-black);
        font-weight: inherit;
      }
    }

    .slider-cards__desc :is(h1, h2, h3, h4, h5, h6, p) {
      margin: 0;
      padding: 0;
      color: var(--corp-color-overlay-black-80);
      font-size: var(--corp-type-mobile-body-2-font-size);
      font-weight: var(--corp-type-mobile-body-2-font-weight);
      line-height: var(--corp-type-mobile-body-2-line-height);
      letter-spacing: -0.14px;
    }

    .slider-cards__card {
      display: flex;
      flex-direction: column;
      aspect-ratio: auto;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .slider-cards__card:hover {
      transform: none;
      box-shadow: none;
    }

    .slider-cards__media {
      position: relative;
      inset: auto;
      width: 100%;
      padding: 34px 68px 0;
      border-radius: var(--corp-radius-md);
      overflow: hidden;
      background: var(--corp-color-surface-300);
    }

    .slider-cards__picture {
      position: static;
      display: block;
      width: 100%;
      height: 100%;
      background: none;
    }

    .slider-cards__picture img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center bottom;
      border-radius: 16px 16px 0 0;
      background: transparent;
    }

    .slider-cards__overlay,
    .slider-cards__card-arrow {
      display: none;
    }

    .slider-cards__body {
      position: relative;
      inset: auto;
      display: flex;
      flex-direction: column;
      padding: 24px 0 0;
    }

    .slider-cards__card-title,
    .slider-cards__card-title :is(h1, h2, h3, h4, h5, h6, p) {
      margin: 0;
      padding: 0;
      color: var(--corp-color-neutral-black);
      font-size: var(--corp-type-mobile-heading-2-medium-font-size);
      font-weight: var(--corp-type-mobile-heading-2-medium-font-weight);
      line-height: var(--corp-type-mobile-heading-2-medium-line-height);
    }

    .slider-cards__card-desc :is(h1, h2, h3, h4, h5, h6, p) {
      margin: 0;
      color: var(--corp-color-neutral-black);
      font-size: var(--corp-type-mobile-body-2-font-size);
      font-weight: var(--corp-type-mobile-body-2-font-weight);
      line-height: var(--corp-type-mobile-body-2-line-height);
      letter-spacing: -0.14px;
    }

    .slider-cards__dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin: 50px 0 0;
    }

    .slider-cards__dot {
      width: 8px;
      height: 8px;
      background: rgb(23 28 143 / 0.2);
    }

    .slider-cards__dot.is-active {
      width: 12px;
      height: 12px;
      background: var(--corp-color-primary);
    }

    .slider-cards__arrows {
      display: none;
    }

    @media (width >=768px) {
      padding: 45px 0 64px;

      .slider-cards__intro {
        margin-bottom: 32px;
      }

      .slider-cards__subtitle :is(h1, h2, h3, h4, h5, h6, p) {
        font-size: var(--corp-type-mobile-tag-1-font-size);
        font-weight: var(--corp-type-mobile-tag-1-font-weight);
        line-height: var(--corp-type-mobile-tag-1-line-height);
      }

      .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
        margin-bottom: 18px;

        strong {
          color: var(--corp-color-primary);
          font-weight: inherit;
        }
      }

      .slider-cards__card-desc :is(h1, h2, h3, h4, h5, h6, p) {
        font-size: var(--corp-type-tablet-body-2-font-size);
        font-weight: var(--corp-type-tablet-body-2-font-weight);
        line-height: var(--corp-type-tablet-body-8-line-height);
        letter-spacing: -0.36px;
      }

      .slider-cards__media {
        padding: 28px 45px 0;
      }

      .slider-cards__body {
        gap: 14px;
        padding-top: 14px;
      }

      .slider-cards__dots {
        display: none;
      }

      .slider-cards__arrows {
        display: flex;
        position: static;
        justify-content: center;
        gap: var(--corp-space-md);
        width: 100%;
        margin: 32px 0 0;
      }
    }

    @media (width >=1200px) {
      padding: 133px 0 126px;

      .slider-cards__intro {
        margin-bottom: 45px;
      }

      .slider-cards__subtitle {
        margin-bottom: 24px;
      }

      .slider-cards__subtitle :is(h1, h2, h3, h4, h5, h6, p) {
        font-size: var(--corp-type-desktop-heading-4-font-size);
        font-weight: var(--corp-type-desktop-heading-4-font-weight);
        line-height: var(--corp-type-desktop-heading-4-line-height);
        letter-spacing: -0.4px;
      }

      .slider-cards__title :is(h1, h2, h3, h4, h5, h6, p) {
        font-size: var(--corp-type-desktop-heading-xxl-font-size);
        font-weight: var(--corp-type-desktop-heading-xxl-font-weight);
        line-height: var(--corp-type-desktop-heading-xxl-line-height);
        letter-spacing: -1.5px;

        strong {
          color: var(--corp-color-primary);
          font-weight: inherit;
        }
      }

      .slider-cards__desc :is(h1, h2, h3, h4, h5, h6, p) {
        font-size: var(--corp-type-desktop-heading-5-font-size);
        font-weight: var(--corp-type-desktop-heading-5-font-weight);
        line-height: var(--corp-type-hero-line-height-24);
        letter-spacing: -0.54px;
      }

      .slider-cards__media {
        box-sizing: border-box;
        padding: 40px 65px 0;
      }

      .slider-cards__picture img {
        border-radius: 16px 16px 0 0;
      }

      .slider-cards__body {
        gap: 16px;
        padding-top: 24px;
      }

      .slider-cards__card-title,
      .slider-cards__card-title :is(h1, h2, h3, h4, h5, h6, p) {
        font-size: var(--corp-type-desktop-heading-2-font-size);
        font-weight: var(--corp-type-desktop-heading-4-font-weight);
        line-height: var(--corp-type-desktop-heading-2-line-height);
      }

      .slider-cards__card-desc,
      .slider-cards__card-desc :is(h1, h2, h3, h4, h5, h6, p) {
        font-size: var(--corp-type-desktop-heading-5-font-size);
        font-weight: var(--corp-type-desktop-heading-5-font-weight);
        line-height: var(--corp-type-hero-line-height-24);
        letter-spacing: -0.54px;
      }

      .slider-cards__arrows {
        margin-top: 116px;
      }
    }
  }
}

.slider-cards.block.sustainability-page {
  padding-bottom: 0;

  @media (width >=768px) {
    padding-bottom: 35px;
  }

  @media (width >=1200px) {
    padding-bottom: 50px;
  }
}