.lp__credibility-component {
  position: relative;
  display: block;
  padding: 41px 0 50px 0;
  background-color: var(--ghost-grey);

  .container {
    .title {
      h3 {
        position: relative;
        text-align: center;
        color: var(--brand-grey-dark);
        font-size: 24px;
        margin-top: 0;
        margin-bottom: 45px;
      }
    }

    .logos__carousel {
      position: relative;
      display: block;
      justify-content: center;

      .logo {
        padding: 0 15px;

        img {
          width: 100%;
        }
      }

      .slick-dots {
        display: block;
        text-align: center;

        li {
          display: inline-block;
          border: 1px solid var(--brand-orange);
          border-radius: 50%;
          margin: 7px;
          width: 14px;
          height: 14px;

          &.slick-active {
            background-color: var(--brand-orange);
          }

          button {
            opacity: 0;
          }
        }
      }
    }
  }
}

@media screen and (min-width: 768px) {
  .lp__credibility-component {
    padding: 30px 0 40px 0;

    .container {
      .arrows {
        display: none;
      }

      .logos__carousel {
        .slick-dots {
          margin-top: 45px;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .lp__credibility-component {
    padding: 30px 0 40px 0;

    .container {
      .carousel__arrows {
        position: relative;

        .arrows {
          display: block;
          z-index: 15;

          .left__arrow {
            position: absolute;
            left: -15px;
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--ghost-grey);
          }

          .right__arrow {
            position: absolute;
            right: -15px;
            top: 50%;
            transform: translateY(-50%) rotate(180deg);
            background-color: var(--ghost-grey);
          }
        }

        .logos__carousel {
          position: relative;
          width: calc(100% - 30px);
          left: 15px;
          margin-bottom: 63px;
          z-index: 10;

          .slick-dots {
            display: block;
            position: absolute;
            bottom: -60px;
            left: 50%;
            transform: translateX(-50%);

            li {
              width: 16px;
              height: 16px;
            }
          }
        }
      }
    }
  }
}