.ct-slider-js {
  margin-top: -3em;
  margin-inline: auto;
  padding-block: 0 min(4em,10vw);
  width: min(var(--container-width),90vw);
  & .track {
    gap: 0;
    display: flex;
    transition: all .3s;
    flex-direction: column;
    &:has(.project-card[active]:last-child)  {
      margin-right: 0;
    }
    & .project-card {
      --default-icon: url(/wp-content/uploads/2026/08/Alubat_2026_Sigle_Blanc1.svg);
      position: relative;
      cursor: pointer;
      border-radius: 0;
      overflow: hidden;
      margin-bottom: 1em;
      transition: flex-basis 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      &:is([active] + .project-card + .project-card ~ &),
      &:has( ~ [active]) {flex: 0;}
      &[active] {flex: 1 1 60%;}
      & .overlay {
        position: absolute;
        inset: 0;
        z-index: 3;
        font-size: 0;
        visibility: hidden;
        &:is(.project-card[active] &) {visibility: visible;}
      } 
      & .project-card__bg {
        position: absolute;
        inset: 0;
        overflow: hidden;
        transition: filter 0.3s, transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        &::before {
          position: absolute;
          inset: 0;
          z-index: 1;
          content: '';
          transition: all .3s;
          background-color: hsl(from #0d1838 h s l/0);
        }
        & img {
          position: relative;
          width: 100%;
          height: 100%;
          display: block;
          object-fit: cover;
        }
        &:is(.project-card[active] ~ .project-card &)::before {background-color: hsl(from #0d1838 h s l/0.6);}
        &:is(.project-card[active] ~ .project-card &)::after {opacity: 1;}
        @media screen and (width >= 1000px) {
          &::after {
            position: absolute;
            inset: 0;
            z-index: 1;
            opacity: 0;
            content: '';
            transition: all .3s;
            pointer-events: none;
            background-color: #ffffff;
            mask: var(--icoon,var(--default-icon)) -3em -2em/ 11em auto no-repeat;
          }
        }
      }
      & .project-card__content {
        position: relative;
        row-gap: 0;
        padding: 0;
        z-index: 2;
        display: grid;
        
        transition: all .3s;
        grid-template-rows: 2.5em 0fr;
        background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.85) 100%);
        &:is(.project-card[active] &) {
          row-gap: min(10em,40vw);
          grid-template-rows: 2.5em 1fr;
        }
        & > .project-card__title {
          position: relative;
          padding: 1em;
          line-height: 1;
          flex: 0 1 auto;
          color: #ffffff;
          height: max-content;
          letter-spacing: 18%;
          font-weight: var(--fw-500);
          background-color: #0d1838;
          font-size: clamp(min(17px,6vw),1.3vw,26px);
          &::before {
            position: absolute;
            inset: 0;
            content: '';
            pointer-events: none;
            background-color: currentColor;
            mask: var(--icoon,var(--default-icon)) 97% center/ min(3em,20%) auto no-repeat;
          }
          @media screen and (width >= 1000px) {
            & {
              margin: 0;
              height: 100%;
              writing-mode: vertical-rl;
              transform: rotate(180deg);
              &::before {
                transform: rotate(180deg);
                mask: var(--icoon,var(--default-icon)) center 3%/ min(9em,137%) auto no-repeat;
              }
              &:is(.project-card[active] ~ .project-card &) {
                width: 100%;
                display: flex;
                flex: 0 0 auto;
                align-items: center;
                background-color: transparent;
              }
              &:is(.project-card[active] ~ .project-card &)::before {content: none;}
            }
          }
        }
        & > .text {
          position: relative;
          padding: 0;
          opacity: 0;
          color: #0d1838;
          line-height: 1.5;
          overflow: hidden;
          transition: all .3s;
          margin: auto .5em .5em;
          background-color: #ffffff;
          &:is(.project-card[active] &) {
            opacity: 1;
            padding: min(2em,5vw);
          }
          & .title {
            text-transform: uppercase;
            line-height: var(--lh-110);
            font-weight: var(--fw-300);
            font-size: clamp(var(--fs-22), 2vw, var(--fs-30));
          }
          & .project-card__desc {
            margin-top: 1em;
            font-size: var(--fs-16);
          }
          @media screen and (width >= 1000px) {
            & {
              opacity: 1;
              margin: auto 0 0;
              overflow: visible;
              padding: min(2em,5vw);
              width: min(370px,70vw);
              &:not(:is([active] &)) {
                opacity: 0;
                top: 2em;
                visibility: hidden;
              }
              &::before {
                position: absolute;
                left: 5px;
                top: -10px;
                content: 'C';
                opacity: 0.3;
                line-height: 100px;
                font-size: min(160px,29vw);
                font-weight: var(--fw-400);
                color: var(--secondary-clr);
                font-family: var(--font-family-fantaisy);
              }
            }
          }
        }
        @media screen and (width >= 1000px) {
          & {
            position: absolute;
            inset: 0;
            gap: .7rem;
            display: flex;
            padding: .5em;
            justify-content: flex-start;
          }
        }
      }
      @media screen and (width >= 1000px) {
        & {
          flex: 0 0 10em;
          margin-bottom: 0;
          height: min(710px,70vw);
          &[active],
          &:is([active] + &:not(:last-child)) {margin-right: 1em;}
        }
      }
    }
    @media screen and (width >= 1000px) {
      & {
        flex-direction: initial;
        align-items: flex-start;
        justify-content: center;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        margin-right: calc((100vw - var(--container-width)) / -2);
      }
    }
  }
  & .controls {
    display: none;
    & .nav-btn  {
      all: unset;
      cursor: pointer;
      border-radius: 50%;
      align-items: center;
      display: inline-flex;
      justify-content: center;
      width: clamp(32px, 2.5vw, 50px);
      height: clamp(32px, 2.5vw, 50px);
      border: 1px solid var(--primary-clr);
      & svg {
        height: auto;
        margin: auto;
        display: block;
        width: clamp(16px, 1.6vw, 22px);
      }
      &[disabled] {opacity: .4;}
    }
    @media screen and (width >= 1000px) {
      & {
        display: flex;
        column-gap: 1em;
        margin-top: 1em;
        justify-content: flex-end;
      }
    }
  }
  & .dots {
      gap: 0.5em;
      display: none;
      justify-content: center;
      & .dot {
          width: 13px;
          height: 13px;
          cursor: pointer;
          transition: 0.3s;
          border-radius: 50%;
          background: hsl(from #0d1838 h s l/.1);
          &.active {
              transform: scale(1.2);
              background: #0d1838;
          }
      }
  }
  & .nav-btn {
    width: 2em;
    height: 2em;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: all .3s;
    background: hsl(from #0d1838 h s l/.1);
  }
  & .track::-webkit-scrollbar {
      display: none;
  }
}