.sliderLayoutContainer--carousel {
  // background-color: aqua;
  padding: 0 59.2px 113px;

  @include mq(xl, min) {
    padding: 0 379.2px 113px;
  }

  @include mq(lg, max) {
    padding: 0 57.2px 105px;
  }

  @include mq(md, max) {
    padding: 0 55.2px 65px;
  }

  .sliderArrows {
    // background-color: blue !important;
    padding: 0;
    margin: 0;

    &.sliderLeftArrow {
      margin-left: 40px;

      @include mq(xl, min) {
        margin-left: 360px;
      }

      &::before {
        content: "";
        width: 11.2px;
        height: 29.6px;
        background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-andreamm.svg");
      }
    }

    &.sliderRightArrow {
      margin-right: 40px;

      @include mq(xl, min) {
        margin-right: 360px;
      }

      &::after {
        content: "";
        width: 11.2px;
        height: 29.6px;
        background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-andreamm.svg");
      }
    }

    .caretIcon {
      display: none;
    }
  }

  .paginationDotsContainer {
    // background-color: lightgreen;
    bottom: 64px;
    gap: 12px;
    align-items: center;

    @include mq(md, max) {
      bottom: 32px;
    }

    .paginationDot {
      width: 10px;
      height: 10px;
      margin: 0;
      padding: 0;
      background: #000000;

      &--isActive {
        width: 17px !important;
        height: 17px !important;
        border: 0.5px solid #000000;
        background: #ffffff;
      }
    }
  }
}