Меню-аккордеон с числом пунктов

/*  @import "compass/css3";  */ 
 
:root {--sec: 2s ease-in-out;  
       --count: 3;}
$bg1: "https://dl.dropbox.com/s/mbho5bqfofk6g99/pic.jpg";
$bg2: "https://dl.dropbox.com/s/kioimintl0v9l4d/pic.jpg";
$bg3: "https://dl.dropbox.com/s/7a60gndncwf81x8/pic.jpg";
$bg4: "https://dl.dropbox.com/s/nkwuv9jz8i99309/pic.jpg";
 
body { background-color: #000;
       display: flex;
       flex-direction: column;  }
 form {margin-left: calc((100% - 1160px) / 2);}
.input {
  width: 2em;
  padding: auto;
/*  font-size: 1.2em;  */  }
.link {position: absolute;
       background-color: #444A;
       padding: 1vw;
       bottom: 0px;
 /*    left: 50%;
       transform: translateX(-50%);
       overflow: hidden;                */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
       text-overflow: ellipsis;
       white-space: wrap;
       z-index: 1;
       text-decoration: none;
       color: #FFF; 
       font-size: 3vw;   }
 
 a {color: red;
    background-color: #111;
    font-family: "Segoe UI", "Ubuntu", monospace;
    font-weight: 500;
    text-decoration: none;
    padding: 2px 10px;
    border-radius: 4px;  
    font-size: 1.5vw;   }     
ul {
  list-style: none;
  max-width: 1200px;
  margin: 0 auto;
  li {position: relative;
    float: left; 
    width: 16.666%; 
    height: 600px;
    opacity: 0.4;
    transition: var(--sec);
    &:hover, &:first-child ~ li:last-child {
      width: 50%;
      opacity: 1;
     transition: var(--sec);   }
    &:hover ~ li:last-child {
      width: 16.666%;
      opacity: 0.4;    }
    &:nth-child(1) {background: url($bg1) top center no-repeat; }
    &:nth-child(2) {background: url($bg2) top right  no-repeat; }
    &:nth-child(3) {background: url($bg3) top center no-repeat; }
    &:nth-child(4) {background: url($bg4) top center no-repeat; }
      }  // End li
    } // End ul
 
.menu {}
 
/** Add cool filter efects **/
ul li {
  &::before {
    content: "";
    display:block;
    width:0;
    height:100%;
    transition: var(--sec);  }
 
&:nth-child(1)::before {background-color: rgba(calc(25.5 * var(--random1,10)), calc(25.5 * var(--random2,10)), calc(25.5 * var(--random3,10)), .3)  }
&:nth-child(2)::before {background-color: rgba(calc(25.5 * var(--random3,10)), calc(25.5 * var(--random1,10)), calc(25.5 * var(--random2,10)), .25) }
&:nth-child(3)::before {background-color: rgba(calc(25.5 * var(--random2,10)), calc(25.5 * var(--random3,10)), calc(25.5 * var(--random1,10)), .25) }
&:nth-child(4)::before {background-color: rgba(calc(25.5 * var(--random1,10)), calc(25.5 * var(--random3,10)), calc(25.5 * var(--random2,10)), .3)  }
        }   /*  End  ul li */
 
input:checked ~ ul li::before { 
  width: 100%;
  transition: var(--sec); 
}
 
input[type="checkbox"] {
  width:200px;
  margin: 5px;
  font-family: "Segoe UI", "Ubuntu", monospace;
  color: white;
  &::after{
    content: "Filters Enabled";
    color: #caa;
    position: relative;
    top: -3px;
    left: 5px;
  }
}
 
/** Layout fixes **/
.credits {text-align: right;
          margin-top: 5px;     }
.credits a {margin-right: calc((100% - 1230px)/2);}
 input[type="checkbox"] {margin-left: calc((100% - 1160px)/2);}
@media (max-width: 1240px) {
  .credits a { margin-right: 0px;}
   input[type="checkbox"] { margin-left: 35px;}   }

 &:nth-child(1)::before {background-color: hsla($color1, 100%, 50%, $alpha) }

@import "compass/css3";
@mixin settingsDefault($width, $height, $opacity, $transition...) {
    @if $width != -1 {
      width: $width;
    }
    @if $height != -1 {
      height: $height;
    }
    opacity: $opacity;
    -moz-transition:    $transition;
    -ms-transition:      $transition;
    -webkit-transition: $transition;
    transition:         $transition;
}
@mixin background-mixin($backgrounds...) {
  $length: length($backgrounds);
  @for $i from 1 through $length {
    $bg: nth($backgrounds, $i);
    &:nth-child(#{$i}) {
      background: url(#{$bg}) top center no-repeat;
    }
  }
}
 
@mixin background-color-mixin($backgrounds...) {
  $length: length($backgrounds);
  @for $i from 1 through $length {
    $bg: nth($backgrounds, $i);
    &:nth-child(#{$i})::before {
      background-color: nth($bg, 1);
      content: nth($bg, 2);
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      color: #fff;
      font-size: 2vw;
    }
  }
}
 
$bg1: "https://dl.dropbox.com/s/mbho5bqfofk6g99/pic.jpg";
$bg2: "https://dl.dropbox.com/s/kioimintl0v9l4d/pic.jpg";
$bg3: "https://dl.dropbox.com/s/7a60gndncwf81x8/pic.jpg";
$bg4: "https://dl.dropbox.com/s/nkwuv9jz8i99309/pic.jpg";
$bgColor1: hsla(60, 100%, 57%, 0.2);
$bgColor2: hsla(122.424, 39%, 49%, 0.25);
$bgColor3: hsla(206.571, 90%, 54%, 0.25);
$bgColor4: hsla(291.241, 64%, 42%, 0.2);
$bgColorTitle1: "Цвет1 Установленный текст который будет отображаться";
$bgColorTitle2: "Цвет2 Установленный текст который будет отображаться";
$bgColorTitle3: "Цвет3 Установленный текст который будет отображаться";
$bgColorTitle4: "Цвет4 Установленный текст который будет отображаться";
 
body { 
  background: #444;
}
 
ul {
 list-style: none;
  max-width: 1200px;
  margin: 0 auto;
  white-space: nowrap;
  
  li {
    display: inline-block;
    vertical-align: top;
    @include settingsDefault(5%,600px,0.4,  all .5s ease-in-out);
    
    &:hover,
    &:first-child ~ li:last-child {
      @include settingsDefault(50%, -1, 1, all .5s ease-in-out);
    }
    
    &:hover ~ li:last-child {
      width: 16.666%;
      opacity: 0.4;
    }
    
    &::before {
      content: "";
      display:block;
      @include settingsDefault(0, 100%, 1, all .5s ease-in-out);
    }
    @include background-color-mixin(($bgColor1, $bgColorTitle1), ($bgColor2, $bgColorTitle2), ($bgColor3, $bgColorTitle3), ($bgColor4, $bgColorTitle4), ($bgColor4, $bgColorTitle4), ($bgColor4, $bgColorTitle4), ($bgColor4, $bgColorTitle4), ($bgColor4, $bgColorTitle4), ($bgColor4, $bgColorTitle4), ($bgColor4, $bgColorTitle4));
    @include background-mixin($bg1, $bg2, $bg3, $bg4, $bg4, $bg4, $bg4, $bg4, $bg4, $bg4);
  }
} 
 
input:checked ~ ul li::before { 
  @include settingsDefault(100%, -1, 1, all .5s ease-in-out);
}
 
input[type="checkbox"] {
  width:555px;
  margin: 15px;
  font-family: "Segoe UI", "Ubuntu", monospace;
  color: white;
  &::before { 
    content: "Pure CSS Accordion";
    font-size: 1.5em;
    position: relative;
    top:-10px;
  }
  &::after{
    content: "Filters Enabled";
    color: #caa;
    position: relative;
    top:-10px;
    left: 5px;
  }
}
 
input[type="checkbox"] { 
  margin-left: calc((100% - 1160px)/2); 
}

* {
    margin: 0;
    padding: 0;
}
body {
    background: #000;
    font-family: sans-serif;
}
.number {
    display: block;
    margin: 1em auto 0 auto;
    font-size: 1.2em;
    width: 2em;
}
.number::-webkit-inner-spin-button,
.number::-webkit-outer-spin-button {
    opacity: 1;
}
#container {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10vmin;
    overflow: hidden;
    transform: skew(5deg);
/* промежутки между кнопками
    gap: 1em;
*/
}
#container li {
    flex: 1;
    transition: all 1s ease-in-out;
    height: 75vmin;
    position: relative;
}
#container li .head {
    color: black;
    background: rgba(255, 30, 173, 0.75);
    padding: 0.5em;
    transform: rotate(-90deg);
    transform-origin: 0% 0%;
    transition: all 0.5s ease-in-out;
    height: 2em;
    line-height: 2em;
    padding-left: 2em;
    position: absolute;
    bottom: -3em;
    left: 0;
    font-size: 1.5em;
    text-decoration: none;
    width: 25vh;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
 
#container li:hover {
    flex-grow: 10;
}
#container li:hover img {
    filter: grayscale(0);
}
#container li:hover .head {
    text-align: center;
    top: calc(100% - 4em);
    width: calc(100% - 2em);
    color: white;
    background: rgba(0, 0, 0, 0.5);
    height: 3em;
    line-height: 3em;
    font-size: 2em;
    transform: rotate(0deg) skew(-5deg);
}
#container li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s ease-in-out;
    filter: grayscale(100%);
}

filter: hue-rotate(...deg);

background: hsla(var(--hue), 100%, 50%, 0.5);

transition: all 0.5s ease-in-out;

$color_1: black;
$color_2: white;
$font-family_1: sans-serif;
 
* {
    margin: 0;
    padding: 0;
}
body {
    background: #000;
    font-family: $font-family_1;
}
&:root {
    --hue: calc(100 + var(--huejs));
    --shift: 120;
    --alpha: .5;
    --time: 1.5s ease-in-out;
    --slant: 5deg;
}
.number {
    display: block;
    margin: 1em auto 0 auto;
    font-size: 1.2em;
    width: 2em;
    &::-webkit-inner-spin-button {
        opacity: 1;
    }
    &::-webkit-outer-spin-button {
        opacity: 1;
    }
}
#container {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10vmin;
    overflow: hidden;
    transform: skew(var(--slant));
    li {
        flex: 1;
        transition: var(--time);
        height: 75vmin;
        position: relative;
        .head {
            color: $color_1;
            background: hsla(var(--hue), 100%, 50%, var(--alpha));
            padding: 0.5em;
            transform: rotate(-90deg);
            transform-origin: top left;
            transition: var(--time);
            height: 2em;
            line-height: 2em;
            padding-left: 2em;
            position: absolute;
            bottom: -3em;
            left: 0;
            font-size: 1.5em;
            text-decoration: none;
            width: 25vh;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        &:hover {
            flex-grow: 10;
            img {
                filter: grayscale(0);
            }
            .head {
                text-align: center;
                top: calc(100% - 4em);
                width: calc(100% - 2em);
                color: $color_2;
                background: hsla(calc(var(--hue) + var(--shift)), 100%, 50%, var(--alpha));
                height: 3em;
                line-height: 3em;
                font-size: 2em;
                transform: rotate(0deg);
            }
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--time);
            filter: grayscale(100%);
        }
    }
}

#container {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10vmin;
    overflow: hidden;
    transform: skew(var(--slant));

#container img {
    transform: skew(calc(var(--slant) * (-1))); }

#container li img.trans {   /**/
    position: absolute; /**/
    z-index: 1;

clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);

#container li .head {
    font-size: 2vw;
}
 
#container li:hover .head {
    font-size: 2em;  /*работает скрипт*/