.before-after-slider {
  padding: 3rem 0;
  position: relative;

  @media screen and (min-width: 768px) {
    padding: 7.8rem 0 8.4rem;
  }

  .vertical-text {
    margin: -58px 0 0;
  }

  h2 {
    text-align: center;
    margin: 0 0 4rem;

    @media screen and (min-width: 768px) {
      margin: 0 0 8.4rem;
    }

    em {
      text-transform: capitalize;
    }
  }

  h3 {
      font-family: var(--font-museo);
      font-size: 2.2rem;
      font-weight: 900;
      color: var(--color-gray);
      margin: 0 0 3rem;
      text-align: center;

      @media screen and (min-width: 520px) {
        min-height: 5.6rem;
        display: flex;
        align-items: center;
      }

      @media screen and (min-width: 768px) {
        text-align: left;
        font-size: 2.5rem;
      }

      @media screen and (min-width: 990px) {
        margin: 2.1rem 0 5.35rem;
        min-height: auto;
      }
  }

  .button-holder {
    text-align: center;
  }
}

.before-after-slider__columns {
  color: var(--color-gray);
  display: flex;
  flex-wrap: wrap;

  @media screen and (min-width: 1100px) {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 7rem;
  }

  > div {
    max-width: 35rem;

    @media screen and (min-width: 520px) {
      margin: 0 auto;
    }

    @media screen and (min-width: 768px) {
      margin: 0 auto 2.8rem;
    }

    @media screen and (min-width: 1100px) {
      max-width: none;
    }
  }

  .before-after-slider__column {
    padding: 0 0 3rem;
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;

    @media screen and (min-width: 520px) {
      padding: 0 0 3.5rem 2rem;
      margin: 0;
      width: 50%;
      max-width: none;
    }

    @media screen and (min-width: 768px) {
      padding: 0 0 3.5rem 3rem;
    }

    @media screen and (min-width: 1100px) {
      padding: 2.3rem 0 0;
      width: 25.5%;
      flex-shrink: 0;
    }

    @media screen and (max-width: 1099px) and (min-width: 520px) {
      &:first-child {
        padding-right: 1.5rem;

        h3 {
          justify-content: end;
        }

        ul {
          text-align: right;
        }

        li {
          padding: 0 5rem 3.5rem 0;

          &::before {
            left: auto;
            right: 0;
          }
        }
      }

      &:last-child {
        padding-left: 1.5rem;
      }
    }

    @media screen and (max-width: 767px) {
      &:first-child {
        li {
          padding: 0 3rem 2rem 0;
        }
      }
    }

    &:first-child {
      padding-left: 0;
    }

    > img {
      width: 100%;
      max-width: 20rem;
      display: block;
      margin: 0 auto 3rem;

      @media screen and (min-width: 520px) {
        margin: 0 0 3rem;
      }

      @media screen and (min-width: 990px) {
        max-width: 26.4rem;
      }
    }
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.6rem;
    line-height: 1.2;
    text-align: center;

    @media screen and (min-width: 520px) {
      text-align: left;
    }

    @media screen and (min-width: 768px) {
      font-size: 1.8rem;
      line-height: 1.44;
    }

    li {
      padding: 0 0 2rem 3rem;
      position: relative;


      @media screen and (min-width: 768px) {
        padding: 0 0 3.5rem 5rem;
      }

      &::before,
      &::after {
        content: '';
        position: absolute;
      }

      &::before {
        top: -1px;
        left: 0;
        width: 20px;
        height: 20px;
        border: 1px solid var(--color-gray);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 9px 2px;
        background-image: linear-gradient(var(--color-gray), var(--color-gray));
      }

      @media screen and (min-width: 768px) {
        &::before {
          width: 26px;
          height: 26px;
          background-size: 12px 2px;
        }
      }
    }
  }

  .our-products {
    order: 1;

    @media screen and (min-width: 1100px) {
      order: 2;
    }

    ul {
      color: var(--color-white);

      li {
        &::before {
          border-color: var(--color-red);
          background-image: linear-gradient(var(--color-white), var(--color-white));
        }

        &::after {
          content: '';
          position: absolute;
          top: 4px;
          left: 9px;
          width: 2px;
          height: 10px;
          background-color: var(--color-white);
        }

        @media screen and (min-width: 768px) {
          &::after {
            top: 6px;
            left: 12px;
            width: 2px;
            height: 12px;
          }
        }
      }
    }
  }

  .before-after-slider-wrapper {
    padding: 0 0.8rem;
    order: 2;
    margin: 0 auto 3rem;

    @media screen and (min-width: 768px) {
      margin: 0 auto 4.6rem;
    }

    @media screen and (min-width: 1100px) {
      order: 1;
    }
  }
}

.ba-slider {
  position: relative;
  cursor: ew-resize;
  padding: 0 2rem;

  @media screen and (min-width: 768px) {
    padding: 0;
  }

  img-comparison-slider {
    --divider-width: 2px;
    --divider-color: var(--color-gray);

    overflow: visible !important;
    padding: 5.1rem 0 4.7rem !important;
  }

  img-comparison-slider:focus {
    outline: none;
    box-shadow: none;
  }

  img-comparison-slider.selected:focus-visible::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid var(--color-white);
    pointer-events: none;
  }

  [slot="first"] {
    position: relative;
    top: 5.1rem !important;
  }

  .handle {
    width: 60px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    color: var(--color-white);
    background-color: var(--color-red);
    border: 1px solid var(--color-black);
    border-radius: 6px;
    transform: translateY(-7px);
    padding-bottom: 3px;
    box-sizing: border-box;

    @media screen and (min-width: 768px) {
      width: 87px;
      height: 41px;
    }

    span {
      font-weight: 400;
      padding: 0 8px;
    }
  }
}