*{
  /* outline: 2px solid green; */
}
.image-slider-container {
    position: relative;
    min-height: 50vh;
    max-width: 100%;
}

.slider-row{
  display: flex;
  width: 90% !important;
  margin:0 auto !important;
}

.column {
  /* float: left; */
  padding: 1em;
  width: 33.33%;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.image-container {
  width: 100%;
  overflow: hidden;
  display: inline-block;
}
  
.slider_image{
  border-radius: 1em;
  width: 100%;
  height: 50vh;
  /* vertical-align: top; */
  position: absolute;
  /* top: 0; */
  top: 50%;
  transform: translateY(-50%);
}

#before-image{
    clip-path: polygon(0% 0, 50% 0, 50% 100%, 0% 100%);
}

#after-image{
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

#before-image2{
  clip-path: polygon(0% 0, 50% 0, 50% 100%, 0% 100%);
}

#after-image2{
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.slider-container {
    /* display: grid;
    place-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 1rem; */
    min-height: 50vh;
    height:100%;
    --position: 50%;
    --position2:50%;
    --position3:50%;
  }

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

.slider:focus-visible ~ .slider-button {
  outline: 5px solid black;
  outline-offset: 3px;
}

.slider-line, .slider-line2, .slider-line3{
  position: absolute;
  inset: 0;
  width: .2rem;
  height: 50vh;
  min-height: 100%;
  background-color: #fff;
  /* z-index: 10; */
  transform: translateX(-50%);
  pointer-events: none;
}

.slider-line {
  left: var(--position);
}


.slider-line2 {
  left: var(--position2);
}


.slider-line3 {
  left: var(--position3);
}


.slider-button, .slider-button2, .slider-button3 {
  position: absolute;
  background-color: #fff;
  color: black;
  padding: .5rem;
  border-radius: 100vw;
  display: grid;
  place-items: center;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* z-index: 100; */
  box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}

.slider-button {
  left: var(--position);
}

.slider-button2 {
  left: var(--position2);
}

.slider-button3 {
  left: var(--position3);
}

@media screen and (max-width: 768px) {
  .slider-row{
    flex-direction: column;
    width: 70%;
    margin:0 auto;
    gap:1em;
  }

  .column{
    width: 100%;
  }
}