.image-slider-container {
      position: relative;
      min-height: 25vh;
      max-width: 100%;
    }

    .slider-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      margin: 0 auto;
      gap: 1em;
    }

    .column {
      padding: 1em;
      width: 20%;
      min-width: 300px;
    }

    .image-container {
      width: 100%;
      overflow: hidden;
      display: inline-block;
    }

    .slider_image {
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      border-radius: 1em;
      width: 100%;
      height: 25vh;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      object-fit: cover;
    }

    .image-slider-container{
      box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
      border-radius: 15px;
    }

    .slider-container {
      
      position: relative;
      min-height: 25vh;
      height: 100%;
      --position: 50%;
      --position2: 50%;
      --position3: 50%;
      --position4: 50%;
      --position5: 50%;
      --position6: 50%;
      --position7: 50%;
      --position8: 50%;
    }

    .slider, .slider2, .slider3, .slider4, .slider5, .slider6, .slider7, .slider8 {
      position: absolute;
      inset: 0;
      cursor: pointer;
      opacity: 0;
      width: 100%;
      height: 100%;
      top: 50%;
      transform: translateY(-50%);
    }

    .slider-line, .slider-line2, .slider-line3, .slider-line4, .slider-line5, .slider-line6, .slider-line7, .slider-line8 {
      position: absolute;
      inset: 0;
      width: 0.2rem;
      height: 25vh;
      min-height: 100%;
      background-color: #fff;
      transform: translateX(-50%);
      pointer-events: none;
    }

    .slider-line { left: var(--position); }
    .slider-line2 { left: var(--position2); }
    .slider-line3 { left: var(--position3); }
    .slider-line4 { left: var(--position4); }
    .slider-line5 { left: var(--position5); }
    .slider-line6 { left: var(--position6); }
    .slider-line7 { left: var(--position7); }
    .slider-line8 { left: var(--position8); }
    

    .slider-button, .slider-button2, .slider-button3, .slider-button4,
.slider-button5, .slider-button6, .slider-button7, .slider-button8 {
  position: absolute;
  background-color: #fff;
  color: black;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 1px 1px 1px hsl(0, 0%, 0%, 0.3);
}


    .slider-button { left: var(--position); }
    .slider-button2 { left: var(--position2); }
    .slider-button3 { left: var(--position3); }
    .slider-button4 { left: var(--position4); }
    .slider-button5 { left: var(--position5); }
    .slider-button6 { left: var(--position6); }
    .slider-button7 { left: var(--position7); }
    .slider-button8 { left: var(--position8); }

    @media screen and (max-width: 768px) {
      .slider-row {
        flex-direction: column;
        width: 90%;
      }

      .column {
        width: 100%;
      }
    }