.transformation-tab-gallery {
  grid-column-gap: 20px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 20px;
  display: grid;
}
.transformation-tab-gallery .tabs-lists-container .tabs-lists {
  list-style: none;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  margin: 0;
  padding: 0;
}
.transformation-tab-gallery .tabs-lists-container .tabs-lists li {
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
}
.transformation-tab-gallery .tabs-lists-container .tabs-lists li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  filter: grayscale(100%);
}
.transformation-tab-gallery .tabs-lists-container .tabs-lists li.ui-state-active img {
  opacity: 1;
  filter: grayscale(0);
}
.transformation-tab-gallery .tabs-content {
  display: flex;
  justify-content: start;
  grid-column-gap: 20px;
}
.transformation-tab-gallery .tabs-content-container {
  justify-content: center;
  align-items: flex-start;
  display: flex;
  grid-column-gap: 20px;
}
.transformation-tab-gallery .tabs-content-container .tabs-media {
  width: 100%;
}
.transformation-tab-gallery .tabs-content-container .transformation-container .s-images-transform {
  width: 280px;
  max-width: 100%;
  height: 380px;
}
.transformation-tab-gallery .tabs-content-container .transformation-container .t-images-transform {
  width: 280px;
  max-width: 100%;
  height: 232px;
}
.transformation-tab-gallery .tabs-content-container .transformation-container .s-images-transform {
  margin-bottom: 10px;
}
.transformation-tab-gallery .tabs-content-container .transformation-container .s-images-transform,
.transformation-tab-gallery .tabs-content-container .transformation-container .t-images-transform {
  position: relative;
  overflow: hidden;
}
.transformation-tab-gallery .tabs-content-container .transformation-container .s-images-transform .before-image,
.transformation-tab-gallery .tabs-content-container .transformation-container .s-images-transform .after-image,
.transformation-tab-gallery .tabs-content-container .transformation-container .t-images-transform .before-image,
.transformation-tab-gallery .tabs-content-container .transformation-container .t-images-transform .after-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
}
.transformation-tab-gallery .tabs-content-container .transformation-container .s-images-transform .before-image img,
.transformation-tab-gallery .tabs-content-container .transformation-container .s-images-transform .after-image img,
.transformation-tab-gallery .tabs-content-container .transformation-container .t-images-transform .before-image img,
.transformation-tab-gallery .tabs-content-container .transformation-container .t-images-transform .after-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.transformation-tab-gallery .tabs-content-container .transformation-container .s-images-transform .before-image,
.transformation-tab-gallery .tabs-content-container .transformation-container .t-images-transform .before-image {
  z-index: 1;
}
.transformation-tab-gallery .tabs-content-container .transformation-container .s-images-transform .after-image,
.transformation-tab-gallery .tabs-content-container .transformation-container .t-images-transform .after-image {
  z-index: 2;
  clip-path: inset(0 0 0 50%);
}
.transformation-tab-gallery .tabs-content-container .transformation-container .s-images-transform .slider-line,
.transformation-tab-gallery .tabs-content-container .transformation-container .t-images-transform .slider-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}
.transformation-tab-gallery .tabs-content-container .transformation-container .s-images-transform .slider,
.transformation-tab-gallery .tabs-content-container .transformation-container .t-images-transform .slider {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 4;
}
.transformation-tab-gallery .tabs-content-container .transformation-container .s-images-transform .slider:active,
.transformation-tab-gallery .tabs-content-container .transformation-container .t-images-transform .slider:active {
  cursor: grabbing;
}
.transformation-tab-gallery .tabs-content-container .transformation-container .s-images-transform .slider .slider-button::before,
.transformation-tab-gallery .tabs-content-container .transformation-container .s-images-transform .slider .slider-button::after,
.transformation-tab-gallery .tabs-content-container .transformation-container .t-images-transform .slider .slider-button::before,
.transformation-tab-gallery .tabs-content-container .transformation-container .t-images-transform .slider .slider-button::after {
  content: "";
  position: absolute;
  top: 0%;
  width: 10px;
  height: 40px;
  transform-origin: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
}
.transformation-tab-gallery .tabs-content-container .transformation-container .s-images-transform .slider .slider-button::before,
.transformation-tab-gallery .tabs-content-container .transformation-container .t-images-transform .slider .slider-button::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%235e048b' d='M201.4 297.4C188.9 309.9 188.9 330.2 201.4 342.7L361.4 502.7C373.9 515.2 394.2 515.2 406.7 502.7C419.2 490.2 419.2 469.9 406.7 457.4L269.3 320L406.6 182.6C419.1 170.1 419.1 149.8 406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3L201.3 297.3z'/%3E%3C/svg%3E");
  right: 50%;
}
.transformation-tab-gallery .tabs-content-container .transformation-container .s-images-transform .slider .slider-button::after,
.transformation-tab-gallery .tabs-content-container .transformation-container .t-images-transform .slider .slider-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%235e048b' d='M439.1 297.4C451.6 309.9 451.6 330.2 439.1 342.7L279.1 502.7C266.6 515.2 246.3 515.2 233.8 502.7C221.3 490.2 221.3 469.9 233.8 457.4L371.2 320L233.9 182.6C221.4 170.1 221.4 149.8 233.9 137.3C246.4 124.8 266.7 124.8 279.2 137.3L439.2 297.3z'/%3E%3C/svg%3E");
  left: 50%;
}
.transformation-tab-gallery .tabs-content-container .button-container .btn {
  color: #fff;
  text-decoration: none;
  background-color: #5e048b;
  padding: 15px 25px;
}
.transformation-tab-gallery .tabs-content-container .button-container .btn:hover {
  background-color: rgba(94, 4, 139, 0.6);
}
@media (max-width: 1200px) {
  .transformation-tab-gallery {
    grid-template-columns: 1fr 1.2fr;
  }
}
@media (max-width: 1000px) {
  .transformation-tab-gallery .tabs-content {
    flex-direction: column;
  }
  .transformation-tab-gallery .tabs-lists-container .tabs-lists {
    grid-template-columns: 1fr 1fr;
  }
  .transformation-tab-gallery .tabs-content-container {
    flex-direction: column;
  }
  .transformation-tab-gallery .tabs-content-container .transformation-container {
    max-width: 100%;
    margin-bottom: 30px;
  }
  .transformation-tab-gallery .tabs-content-container .content {
    width: 100%;
  }
}
@media (max-width: 576px) {
  .transformation-tab-gallery {
    grid-template-columns: 1fr 1fr;
  }
  .transformation-tab-gallery .tabs-lists-container .tabs-lists {
    grid-template-columns: 1fr 1fr;
  }
  .transformation-tab-gallery .tabs-lists-container .tabs-lists li {
    max-width: 120px;
    height: 200px;
  }
  .transformation-tab-gallery .tabs-content-container .tabs-content .button-container .btn {
    display: block;
    text-align: center;
  }
}
@media (max-width: 450px) {
  .transformation-tab-gallery .tabs-content-container .transformation-container .s-images-transform {
    width: 150px;
    max-width: 100%;
    height: 280px;
  }
  .transformation-tab-gallery .tabs-content-container .transformation-container .t-images-transform {
    width: 150px;
    max-width: 100%;
    height: 135px;
  }
}