.slider {
    margin-top: 15px;
    justify-content: center;
    height: 600px;
    margin: 0;
    display: grid;
    grid-template-rows: 507px 100px;
    grid-template-columns: 1fr 70px 70px 70px 70px 1fr;
    align-items: center;
    justify-items: center;
  }
  #carousel img {
    padding-bottom: 20px;
  }
  #carousel .item {
    width: 85% !important;
    height: 1000px !important;
  }
  main#carousel {
    font-size: 1.0;
    grid-row: 1 / 2;
    grid-column: 1 / 8;
    width: 100%;
    height: 750px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    transform-style: preserve-3d;
    perspective: 600px;
    --items: 4;
    --middle: 3;
    --position: 1;
    pointer-events: none;
    z-index: 999999999 !important;

  }
  
 #carousel div.item {
    
    position: absolute;
    width: 800px;
    height: 300px;
    background-color: transparent;
    --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(-300px * var(--r)));
    z-index: calc((var(--position) - var(--abs)));
    /* z-index: 999999999 !important; */

  }
  
  div.item:nth-of-type(1) {
    --offset: 1;
    background-color: transparent;
  }
  div.item:nth-of-type(2) {
    --offset: 2;
    background-color: transparent;
  }
  div.item:nth-of-type(3) {
    --offset: 3;
    background-color: transparent;
  }
  div.item:nth-of-type(4) {
    --offset: 4;
    background-color: transparent;
    
  }
  
  
  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;
  }
  .slider {
    height: 325px !important;
    }
  @media only screen and (max-width: 767px) {
    .slider .item {
      height: 0% !important;
    }
    .slider {
         height: 800px !important;
      }

  }
  #carousel {
    margin-top: 0px !important;
  }