.fc_values_slider {
  overflow: hidden;
  counter-reset: value-number;

  .values_wrapper {
    max-width: 1200px;

    .tns-ovh {
      overflow: visible !important;
    }

    .value_slider {
      display: flex;
      align-items: stretch;

      .value_slide {
        flex: 1;
        display: flex;
        counter-increment: value-number;

        .value {
          --color-headings: var(--color-white);
          position: relative;
          isolation: isolate;
          border-radius: var(--border-radius-s);
          padding: calc(var(--padding-xs) * 2) var(--padding-xs)
            var(--padding-xs);
          display: flex;
          align-items: flex-end;
          justify-content: flex-start;

          .wp_content {
            display: flex;
            flex-direction: column;

            li {
              color: var(--color-white);
            }
          }

          &::before {
            content: "0" counter(value-number) ".";
            position: absolute;
            top: calc(0px - var(--gap-s));
            left: 50%;
            transform: translateX(-50%);
            padding-inline: calc(var(--gap-s) / 2);
            aspect-ratio: 1;
            border-radius: var(--border-radius-s);
            background-color: var(--color-green);
            color: var(--color-black);
            font-size: clamp(29px, 1.389vw + 21px, 46px);
            line-height: 1;
            font-weight: 900;
            letter-spacing: -1.5px;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          &::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: var(--border-radius-s);
            background: linear-gradient(
              180deg,
              hsl(from var(--color-black) h s l / 0) 24.44%,
              hsl(from var(--color-black) h s l / 0.9) 81.78%
            );
          }
        }

        &:nth-child(n + 10) {
          .value {
            &::before {
              content: counter(value-number) ".";
            }
          }
        }
      }
    }
  }

  /* responsive */
  @media (width >= 576px) {
    .values_wrapper {
      .value_slider {
        .value_slide {
          .value {
            aspect-ratio: 8 / 3;

            &::before {
              left: calc(0px - var(--gap-s));
              transform: translateX(0);
            }
          }
        }
      }
    }
  }

  @media (width >= 768px) {
    .values_wrapper {
      .tns-controls {
        display: flex !important;
        justify-content: flex-start;
      }

      .value_slide {
        &:not(.tns-slide-active) {
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.4s ease;
        }

        &.tns-slide-active {
          opacity: 1;
          pointer-events: all;
        }

        &.tns-slide-active ~ .value_slide:not(.tns-slide-active) {
          opacity: 0.2;
        }
      }
    }
  }
}