.before-after-section {
  &:has(.dark-background) {
    background: linear-gradient(180deg, #585858 0%, #383838 100%);
    color: var(--brand-white);
    .section-heading--title {
      color: var(--brand-white);
    }
    ul li::before {
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><mask id="path-1-inside-1_10295_3683" fill="white"><path d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z"/></mask><path d="M12 24V23C5.92487 23 1 18.0751 1 12H0H-1C-1 19.1797 4.8203 25 12 25V24ZM24 12H23C23 18.0751 18.0751 23 12 23V24V25C19.1797 25 25 19.1797 25 12H24ZM12 0V1C18.0751 1 23 5.92487 23 12H24H25C25 4.8203 19.1797 -1 12 -1V0ZM12 0V-1C4.8203 -1 -1 4.8203 -1 12H0H1C1 5.92487 5.92487 1 12 1V0Z" fill="white" fill-opacity="0.3" mask="url(%23path-1-inside-1_10295_3683)"/><path d="M15.4514 8.89862L16.1633 9.61151L16.2522 9.70038L16.1633 9.78827L10.7746 15.1769L10.6867 15.0881L7.83614 12.2385L7.74825 12.1496L8.54903 11.3488L8.63789 11.2609L10.7746 13.3976L15.2736 8.89862L15.3625 8.81073L15.4514 8.89862Z" fill="white" stroke="white" stroke-width="0.25"/></svg>') !important;
    }
  }
  .before-after-section--wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--content-gap-lg);

    .before-after-section--blocks {
      display: flex;
      flex-direction: row;
      gap: var(--grid-gap-md);
      @media (max-width: 1232px) {
        flex-direction: column;
        &:has(.before-after-section--text) {
          flex-direction: column-reverse;
          .before-after-section--block-heading {
            display: none;
          }
          .mobile-heading {
            display: block;
          }
        }
      }
      @media (max-width: 749px) {
        gap: var(--grid-gap-sm);
      }
      &:has(.before-after-section--text) {
        gap: var(--grid-gap-lg);
        @media (max-width: 749px) {
          gap: var(--grid-gap-lg);
        }
      }
      .mobile-heading {
        display: none;
        color: var(--brand-white);
        margin-bottom: var(--grid-gap-lg);
      }
    }
    .before-after-section--block {
      flex: 1 1 50%;
    }
    .before-after-section--comparison {
      .before-after-slider {
        overflow: hidden;
        border-radius: 16px;
        position: relative;
        aspect-ratio: 638/479;

        @media (max-width: 1232px) {
          aspect-ratio: 288/216;
        }

        > * {
          position: absolute;
        }

        .comparison-slider {
          z-index: 2;
          width: 100%;
          height: 100%;
          -moz-appearance: none;
          -webkit-appearance: none;
          border: none;
          background: transparent;
          margin: 0;
          top: 0;
          left: 0;
          outline: none;
          padding: 0;
          cursor: ew-resize;

          &::-moz-range-track {
            background: transparent;
          }

          &::-ms-track {
            z-index: 2;
            width: 100%;
            height: 100%;
            -moz-appearance: none;
            -webkit-appearance: none;
            border: none;
            background: transparent;
            margin: 0;
            top: 0;
            left: 0;
            outline: none;
            padding: 0;
          }

          &::-ms-fill-lower {
            background-color: transparent;
          }

          &::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 100vw;
            width: 64px;
            opacity: 0;
          }

          &::-moz-range-thumb {
            -moz-appearance: none;
            opacity: 0;
          }

          &::-ms-thumb {
            opacity: 0;
          }

          &::-ms-tooltip {
            display: none;
          }
        }

        .comparison-slider-icon {
          z-index: 3;
          width: 52px;
          height: 52px;
          border-radius: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          top: 50%;
          translate: calc(-50% - 1.5px) -50%;
          transition: left 0.1s;
          pointer-events: none;
          left: 100%;
          @media (max-width: 1232px) {
            height: 36px;
            width: 36px;
          }

          svg {
            height: 100%;
            width: 100%;
          }
        }

        .comparison-image {
          width: 100%;
          height: 100%;
          z-index: 0;
          overflow: hidden;
          transition: width 0.1s;

          &.image-left {
            z-index: 1;

            .comparison-label {
              left: 30px;
              @media (max-width: 1232px) {
                left: 20px;
              }
            }
          }

          &.image-right {
            .comparison-label {
              right: 30px;
              @media (max-width: 1232px) {
                right: 20px;
              }
            }
          }

          .comparison-label {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            z-index: 1;
            margin: 0;
            bottom: 20px;
            background: var(--brand-white);
            color: var(--brand-black);
            border-radius: 8px;
            height: 25px;
            padding: 0 10px;
            font-family: "PP Neue Montreal";
            font-weight: 500;
            line-height: 100%;
            letter-spacing: 2%;
            font-size: 10px;
          }

          picture {
            img {
              width: 100%;
              height: auto;
              min-height: 100%;
              object-fit: cover;
              display: block;
              position: absolute;
              translate: 0 -50%;
              top: 50%;
            }
          }
        }
      }
    }
    .before-after-section--text {
      display: flex;
      flex-direction: column;
      gap: var(--text-gap-lg);
      .before-after-section--block-heading {
        color: var(--brand-white);
      }
      .before-after-section--block-text {
        display: flex;
        flex-direction: column;
        gap: var(--text-gap-lg);
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          color: var(--brand-white);
          margin: 0;
        }
        p {
          font-family: "PP Neue Montreal";
          font-weight: 400;
          line-height: 150%;
          letter-spacing: 0;
          font-size: 20px;
          margin: 0;
          /* paragraph-spacing:20px; */
          @media (max-width: 749px) {
            font-size: 16px;
          }
        }
        ul {
          list-style: none;
          padding-left: 0;
          display: flex;
          flex-direction: column;
          gap: var(--content-gap-sm);
          margin: 0;
          li {
            position: relative;
            padding-left: calc(24px + 12px);
            margin-bottom: 0.7em;
            font-family: "PP Neue Montreal";
            font-weight: 400;
            letter-spacing: 0;
            line-height: 150%;
            font-size: 16px;
            margin: 0;
            /* paragraph-spacing:16px; */
            @media (max-width: 749px) {
              font-size: 14px;
            }
            &::before {
              content: "";
              position: absolute;
              left: 0;
              top: 0.2em;
              width: 24px;
              height: 24px;
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
              display: inline-block;
              background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><mask id="path-1-inside-1_10295_3683" fill="black"><path d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z"/></mask><path d="M12 24V23C5.92487 23 1 18.0751 1 12H0H-1C-1 19.1797 4.8203 25 12 25V24ZM24 12H23C23 18.0751 18.0751 23 12 23V24V25C19.1797 25 25 19.1797 25 12H24ZM12 0V1C18.0751 1 23 5.92487 23 12H24H25C25 4.8203 19.1797 -1 12 -1V0ZM12 0V-1C4.8203 -1 -1 4.8203 -1 12H0H1C1 5.92487 5.92487 1 12 1V0Z" fill="black" fill-opacity="0.3" mask="url(%23path-1-inside-1_10295_3683)"/><path d="M15.4514 8.89862L16.1633 9.61151L16.2522 9.70038L16.1633 9.78827L10.7746 15.1769L10.6867 15.0881L7.83614 12.2385L7.74825 12.1496L8.54903 11.3488L8.63789 11.2609L10.7746 13.3976L15.2736 8.89862L15.3625 8.81073L15.4514 8.89862Z" fill="black" stroke="black" stroke-width="0.25"/></svg>');
            }
          }
        }
      }
    }
  }
}