.brand-slider {
  display: block;
  overflow: hidden;
  padding: var(--PT) 0px var(--PB);

  .brand-slider__header {
    --gap: 5rem;
    display: flex;
    flex-direction: column;
    font-family: var(--font-heading-family);
    font-style: normal;
    font-weight: 500;
    gap: var(--gap);
    letter-spacing: normal;
    line-height: 1.12;
    margin-bottom: var(--gap);
    text-align: center;

    .brand-slider__heading {
      font-family: inherit;
      font-size: var(--heading, 7.2rem);
    }

    .brand-slider__content {
      font-size: var(--content, 2.4rem);
      margin-bottom: 5rem;
    }
  }

  .brand-slider__body {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    width: 100%;

    .swiper {
      max-width: 100%;
    }

    .brand-slider__thumbs {
      .brand-slider__thumb-slide {
        width: auto;

        &:not(.swiper-slide-thumb-active) {
          opacity: 0.5;
        }

        .brand-slider__swiper-image img {
          height: 4rem;
          width: auto;
        }
      }
    }
  }

  .brand-slider__swiper-inner {
    font-family: var(--font-body-family);
    font-size: var(--slide-content, 3.6rem);
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.2;
    max-width: 109rem;

    .brand-slider__swiper-content {
      margin-bottom: 2.4rem;
    }

    .brand-slider__swiper-brand_name {
      font-family: var(--font-body-family);
      font-size: var(--slide-name, 2.4rem);
      font-style: normal;
      font-weight: 400;
      line-height: 1.3;
      letter-spacing: normal;

      img {
        display: none;
      }
    }
  }

  &.brand-slider__layout-0 .brand-slider__thumbs,
  &.brand-slider__layout-0 .brand-slider__thumbs .swiper-wrapper {
    overflow: visible;
  }

  &.brand-slider__layout-1 {
    text-align: center;

    .brand-slider__header {
      --gap: 8rem;
    }

    .swiper {
      max-width: 93rem;
      width: 100%;
    }

    .brand-slider__slide {
      display: flex;
      justify-content: center;
    }

    .brand-slider__body {
      gap: 1rem;

      .brand-slider__thumbs .brand-slider__thumb-slide {
        display: grid;
        height: auto;
        place-items: center;

        .brand-slider__swiper-image img {
          height: auto;
          margin: 0 auto;
          max-width: 23rem;
          width: revert-layer;
        }
      }
    }
  }

  .brand-slider__navigation {
    align-items: center;
    display: flex;
    justify-content: space-between;
    left: 50%;
    padding: 0 2rem;
    position: relative;
    top: -6rem;
    translate: -50%;
    width: 100vw;
    z-index: 2;

    &>div {
      position: absolute;
    }

    .brand-slider__prev {
      left: 2rem;
      rotate: 180deg;
    }

    .brand-slider__next {
      right: 2rem;
    }

    button {
      align-items: center;
      background: #fff;
      border: 1px solid var(--color);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      height: var(--arrow-size);
      width: var(--arrow-size);
      cursor: pointer;

      &:hover {
        background: var(--color);

        path {
          stroke: #fff;
        }
      }
    }
  }

  @media screen and (width < 1200px) {
    .brand-slider__header {
      --gap: 4rem;
      gap: 0;
      text-align: left;

      .brand-slider__heading {
        font-size: 4rem;
      }

      .brand-slider__content {
        margin-bottom: 0;
      }
    }

    &:not(.brand-slider__layout-1) .brand-slider__thumbs {
      display: none;
    }

    .brand-slider__swiper-inner {
      .brand-slider__swiper-brand_name {
        span {
          display: none;
        }

        img {
          display: block;
        }
      }

      .brand-slider__swiper-name {
        font-size: 3.6rem;
      }
    }

    .brand-slider__navigation {
      top: 0;
    }
  }
}