main#carousel {
    grid-row: 1 / 2;
    grid-column: 1 / 12;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    transform-style: preserve-3d;
    perspective: 600px;
    --items: 5;
    --middle: 3;
    --position: 1;
    pointer-events: none;
  }
  
  div.item {
    position: absolute;
    width: 226px;
    height: 300px;
    background-color: rgb(0, 0, 0);
    --r: calc(var(--position) - var(--offset));
    --abs: max(calc(var(--r) * -1), var(--r));
    transition: all 0.25s linear;
    transform: rotateY(calc(-10deg * var(--r)))
      translateX(calc(-226px * var(--r)));
    z-index: calc((var(--position) - var(--abs)));
  }
  
  img.gal-img {
    border: 5px solid #000 !important;
  }

  .client-gal input {
    top: 370px;
    position: relative;
  }

  div.item:nth-of-type(1) {
    --offset: 1;
    background-color: #000;
  }
  div.item:nth-of-type(2) {
    --offset: 2;
    background-color: #000;
  }
  div.item:nth-of-type(3) {
    --offset: 3;
    background-color: #000;
  }
  div.item:nth-of-type(4) {
    --offset: 4;
    background-color: #000;
  }
  div.item:nth-of-type(5) {
    --offset: 5;
    background-color: #000;
  }
  div.item:nth-of-type(6) {
    --offset: 6;
    background-color: #000;
  }
  div.item:nth-of-type(7) {
    --offset: 7;
    background-color: #000;
  }
  div.item:nth-of-type(8) {
    --offset: 8;
    background-color: #000;
  }
  div.item:nth-of-type(9) {
    --offset: 9;
    background-color: #000;
  }
  div.item:nth-of-type(10) {
    --offset: 10;
    background-color: #000;
  }
  div.item:nth-of-type(11) {
    --offset: 11;
    background-color: #000;
  }
  div.item:nth-of-type(12) {
    --offset: 12;
    background-color: #000;
  }
  div.item:nth-of-type(13) {
    --offset: 13;
    background-color: #000;
  }
  div.item:nth-of-type(14) {
    --offset: 14;
    background-color: #000;
  }
  div.item:nth-of-type(15) {
    --offset: 15;
    background-color: #000;
  }
  div.item:nth-of-type(16) {
    --offset: 16;
    background-color: #000;
  }
  div.item:nth-of-type(17) {
    --offset: 17;
    background-color: #000;
  }
  div.item:nth-of-type(18) {
    --offset: 18;
    background-color: #000;
  }
  div.item:nth-of-type(19) {
    --offset: 19;
    background-color: #000;
  }
  
  input:nth-of-type(1) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  input:nth-of-type(1):checked ~ main#carousel {
    --position: 1;
  }
  
  input:nth-of-type(2) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }
  input:nth-of-type(2):checked ~ main#carousel {
    --position: 2;
  }
  
  input:nth-of-type(3) {
    grid-column: 4 /5;
    grid-row: 2 / 3;
  }
  input:nth-of-type(3):checked ~ main#carousel {
    --position: 3;
  }
  
  input:nth-of-type(4) {
    grid-column: 5 / 6;
    grid-row: 2 / 3;
  }
  input:nth-of-type(4):checked ~ main#carousel {
    --position: 4;
  }
  
  input:nth-of-type(5) {
    grid-column: 6 / 7;
    grid-row: 2 / 3;
  }
  input:nth-of-type(5):checked ~ main#carousel {
    --position: 5;
  }

  input:nth-of-type(6) {
    grid-column: 7 / 8;
    grid-row: 2 / 3;
  }
  input:nth-of-type(6):checked ~ main#carousel {
    --position: 6;
  }

  input:nth-of-type(7) {
    grid-column: 8 / 9;
    grid-row: 2 / 3;
  }
  input:nth-of-type(7):checked ~ main#carousel {
    --position: 7;
  }

  input:nth-of-type(8) {
    grid-column: 9 / 10;
    grid-row: 2 / 3;
  }
  input:nth-of-type(8):checked ~ main#carousel {
    --position: 8;
  }

  input:nth-of-type(9) {
    grid-column: 10 / 11;
    grid-row: 2 / 3;
  }
  input:nth-of-type(9):checked ~ main#carousel {
    --position: 9;
  }

  input:nth-of-type(10) {
    grid-column: 11 / 12;
    grid-row: 2 / 3;
  }
  input:nth-of-type(10):checked ~ main#carousel {
    --position: 10;
  }

  input:nth-of-type(11) {
    grid-column: 12 / 13;
    grid-row: 2 / 3;
  }
  input:nth-of-type(11):checked ~ main#carousel {
    --position: 11;
  }

  input:nth-of-type(12) {
    grid-column: 13 / 14;
    grid-row: 2 / 3;
  }
  input:nth-of-type(12):checked ~ main#carousel {
    --position: 12;
  }

  input:nth-of-type(13) {
    grid-column: 14 / 15;
    grid-row: 2 / 3;
  }
  input:nth-of-type(13):checked ~ main#carousel {
    --position: 13;
  }

  input:nth-of-type(14) {
    grid-column: 15 / 16;
    grid-row: 2 / 3;
  }
  input:nth-of-type(14):checked ~ main#carousel {
    --position: 14;
  }

  input:nth-of-type(15) {
    grid-column: 16 / 17;
    grid-row: 2 / 3;
  }
  input:nth-of-type(15):checked ~ main#carousel {
    --position: 15;
  }

  input:nth-of-type(16) {
    grid-column: 17 / 18;
    grid-row: 2 / 3;
  }
  input:nth-of-type(16):checked ~ main#carousel {
    --position: 16;
  }

  input:nth-of-type(17) {
    grid-column: 18 / 19;
    grid-row: 2 / 3;
  }
  input:nth-of-type(17):checked ~ main#carousel {
    --position: 17;
  }

  input:nth-of-type(18) {
    grid-column: 19 / 20;
    grid-row: 2 / 3;
  }
  input:nth-of-type(18):checked ~ main#carousel {
    --position: 18;
  }

  input:nth-of-type(19) {
    grid-column: 20 / 21;
    grid-row: 2 / 3;
  }
  input:nth-of-type(19):checked ~ main#carousel {
    --position: 19;
  }