/* =========================================================
       SEZIONE STILE FEED FORGE
       ========================================================= */

    .slider-in-place-vertical {
     /* background: #f3f3f3;*/

      /*
       * equivalente circa a:
       *
       * pt-[72px]
       * pb-[72px]
       */
      padding-top: 72px;
      padding-bottom: 72px;

      position: relative;
    }


    /*
     * Contenitore centrale.
     */
    .slider-in-place-vertical .slider-container {
      /*width: min(1000px, 90%);*/
      margin: 0 auto;
    }


    /* =========================================================
       FINESTRA DELLO SLIDER
       ========================================================= */

    .slider-in-place-vertical .slider-viewport {

      /*
       * Card centrale: 140px
       * spazio visibile sopra: 80px
       * spazio visibile sotto: 80px
       *
       * totale: 300px
       */
      --panel-height: 140px;
      --viewport-height: 300px;
      --gap: 20px;

      height: var(--viewport-height);

      position: relative;
      /*overflow: hidden;*/
    }


    /* =========================================================
       TRACK
       ========================================================= */

    .slider-in-place-vertical .slider-track {
      display: flex;
      flex-direction: column;

      gap: var(--gap);

      /*
       * Consente alla prima card di essere
       * centrata all'inizio.
       *
       * (300 - 140) / 2 = 80px
       */
      padding-top: calc(
        (var(--viewport-height) - var(--panel-height)) / 2
      );

      /*
       * Stessa cosa per l'ultima card.
       */
      padding-bottom: calc(
        (var(--viewport-height) - var(--panel-height)) / 2
      );

      will-change: transform;
    }


    /* =========================================================
       CARD
       ========================================================= */

    .slider-in-place-vertical .slider-card {
      flex: 0 0 var(--panel-height);
      border-radius: 0.5rem;
      height: var(--panel-height);
      width: 100%;

      /*border-radius: 14px;*/
      overflow: hidden;

      display: grid;
      grid-template-columns: 32% 68%;

      color: #fff;

      transform-origin: center center;

      will-change:
        transform,
        opacity;
        gap: 2rem;
    }


    .slider-in-place-vertical .slider-number {
      display: flex;
      align-items: center;
      justify-content: center;

      padding: 25px 35px;

      font-size: clamp(42px, 6vw, 72px);
      font-weight: 700;
      line-height: 1;

      background: rgba(255, 255, 255, 0.12);
      border-radius: 0.5rem;
    }


    .slider-in-place-vertical .slider-text {
      display: flex;
      align-items: center;

      padding: 25px 40px;

      font-size: clamp(18px, 2vw, 26px);
      font-size: 2rem;
      line-height: 1.15;

      font-weight: 700;
      text-transform: uppercase;
      border-radius: 0.5rem;
    }


    /* =========================================================
       COLORI DEMO
       ========================================================= */
/*
    .card-1 {
      background: linear-gradient(
        90deg,
        #e4b300,
        #d89100
      );
    }

    .card-2 {
      background: linear-gradient(
        90deg,
        #ffc400,
        #eb5b00
      );
      background: linear-gradient(
    101deg,
    rgba(245, 187, 5, 1) 0%,
    rgba(224, 78, 0, 1) 100%
  );
    }

    .card-3 {
      background: linear-gradient(
        90deg,
        #edb500,
        #d66b00
      );
    }

    .card-4 {
      background: linear-gradient(
        90deg,
        #d7a500,
        #bd5700
      );
    }*/

.slider-in-place-vertical .slider-text, .slider-in-place-vertical .slider-number {
  background: linear-gradient(
    101deg,
    rgba(245, 187, 5, 1) 0%,
    rgba(224, 78, 0, 1) 100%
  );
}

    /* =========================================================
       SFUMATURE SUPERIORE / INFERIORE

       Servono a far "morire" le card ai bordi,
       come in uno slider verticale.
       ========================================================= */

    .slider-in-place-vertical .slider-viewport::before,
    .slider-in-place-vertical .slider-viewport::after {
      content: "";

      position: absolute;
      z-index: 10;

      left: 0;
      right: 0;

      height: 45px;

      pointer-events: none;
    }


    .slider-in-place-vertical .slider-viewport::before {
      top: 0;

      /*background: linear-gradient(
        to bottom,
        #f3f3f3 0%,
        rgba(243, 243, 243, 0) 100%
      );*/
    }


    .slider-in-place-vertical .slider-viewport::after {
      bottom: 0;

     /* background: linear-gradient(
        to top,
        #f3f3f3 0%,
        rgba(243, 243, 243, 0) 100%
      );*/
    }


    /* =========================================================
       MOBILE
       ========================================================= */

    @media (max-width: 700px) {

      .slider-in-place-vertical .slider-in-place-vertical {
        /*
         * come mobile:pt-0
         */
        padding-top: 0;
        padding-bottom: 72px;
      }

      .slider-in-place-vertical .slider-viewport {
        --panel-height: 120px;
        --viewport-height: 280px;
        --gap: 16px;
      }

      .slider-in-place-vertical .slider-card {
        grid-template-columns: 36% 64%;
        gap: 0.5rem;
      }

      .slider-in-place-vertical .slider-number {
        padding: 20px;
        font-size: 38px;
      }

      .slider-in-place-vertical .slider-text {
        padding: 20px;
        font-size: 15px;
      }

    }