.comparison-slider {
    border-radius: var(--media-radius);
    display: block;
    position: relative;
    overflow: hidden;
  }
  
  .comparison-slider--full-width .comparison-slider {
    border-radius: 0;
  }
  
  .comparison-slider--full-width .page-width.comparison-slider-main {
    max-width: 100%;
    padding: 0;
  }
  
  .page-width.comparison-slider-main-text {
    padding: 0;
  }
  
  .comparison-slider-main-text.grid-item .rich-text-text {
    font-size: calc(var(--font-body-scale)* 1.4rem);
  }
  
  .comparison-slider-main-text .banner-buttons {
    margin: 1rem 0 2rem 0;
  }
  
  .comparison-slider-main-text.grid-item a.button-arrow.button.button--primary {
    font-size: calc(var(--font-body-scale)* 1.4rem);
    min-height: calc(3.5rem + var(--buttons-border-width)* 2);
  }
  
  .comparison-slider--full-width .comparison-slider-main-text {
    padding: 0 1.5rem;
  }
  
  .comparison-slider-title {
    margin: -10px 0 20px 0;
  }
    
  .comparison-slider.animating .comparison-slider-button {
    transition-property: top, left;
    transition-duration: 0.08s;
    transition-timing-function: ease;
  }
    
  .comparison-slider.animating .comparison-slider-after {
    transition-property: clip-path;
    transition-duration: 0.08s;
    transition-timing-function: ease;
  }
  
  .comparison-slider-after {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
    
  .comparison-slider[data-layout=horizontal] .comparison-slider-after {
    clip-path: inset(0px 0px 0px var(--percent));
  }
    
  .comparison-slider-button {
    position: absolute;
    z-index: 2;
    color: inherit;
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
  }
    
  .comparison-slider[data-layout=horizontal] .comparison-slider-button {
    top: 0;
    left: var(--percent);
    width: 2.8rem;
    height: 100%;
    margin-left: -1.4rem;
    cursor: col-resize;
  }
    
  .comparison-slider-button::before,
  .comparison-slider-button::after {
    content: '';
    position: absolute;
    background-color: rgb(var(--color-background));
    pointer-events: none;
  }
    
  .comparison-slider[data-layout=horizontal] .comparison-slider-button::before,
  .comparison-slider[data-layout=horizontal] .comparison-slider-button::after {
    width: 0.3rem;
    height: 50%;
    left: 50%;
    margin-left: -0.15rem;
  }
    
  .comparison-slider[data-layout=horizontal] .comparison-slider-button::before {
    top: 0;
    margin-top: -2rem;
  }
  
  .comparison-slider[data-layout=horizontal]  .comparison-slider-button::after {
    bottom: 0;
    margin-bottom: -2rem;
  }
  
  .comparison-slider-button span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.6rem;
    height: 4.6rem;
    margin-left: -1.3rem;
    margin-top: -2.3rem;
    border-radius: 4rem;
    background-color: rgb(var(--color-background));
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
    
  .comparison-slider-button .icon {
    height: 1.6rem;
    width: auto;
  }
    
  .comparison-slider-before .comparison-placeholder {
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .comparison-slider-button svg.bi.bi-list {
      width: 22px;
      height: 22px;
  }
  
  .before-after {
      position: relative;
      z-index: 2;
  }
    
  .before-box {
      position: absolute;
      left: 0;
      bottom: -1px;
  }
    
  .after-box {
      position: absolute;
      right: 0;
      bottom: -1px;
  }
  
  .before-after.disable-true {
      display: none;
  }
  
  .before-box,
  .after-box {
      background: rgb(var(--color-base-background-accent-1));
      color: rgb(var(--color-base-accent-1));
      border-radius: 3px;
      padding: 0.5rem 0.75rem;
      font-size: 14px;
  }
  
  .before-box {
      border-bottom-right-radius: 0;
      border-top-left-radius: 0;
  }
  
  .after-box {
      border-bottom-left-radius: 0;
      border-top-right-radius: 0;
  }
  
  .comparison-slider .placeholder-svg {
      background: rgb(var(--color-base-accent-2));
  }
  
  @media screen and (min-width: 990px) {
    .comparison-slider-content.grid {
      align-items: center;
    }
    .comparison-slider-content.grid.row-reverse {
      flex-direction: row-reverse;
    }
    .comparison-slider-main .comparison-slider-main-text.grid-item {
      width: calc(25% - var(--grid-desktop-horizontal-spacing)* 3 / 4);
      max-width: calc(25% - var(--grid-desktop-horizontal-spacing) / 2);
    }
    .comparison-slider-main .comparison-slider.grid-item {
      width: calc(75% - var(--grid-desktop-horizontal-spacing)* 3 / 4);
      max-width: calc(75% - var(--grid-desktop-horizontal-spacing) / 2);
    }
  }
  
  @media screen and (max-width: 990px) {
    .comparison-slider-main .comparison-slider-main-text.grid-item,
    .comparison-slider-main .comparison-slider.grid-item {
      width: 100%;
      max-width: 100%;
    }
  }