challenge-vtex-io-bernardo-waldhelm/styles/sass/pages/product/vtexSlider/vtex.slider-layout.scss

.sliderLayoutContainer--carousel {
  background: unset;
  width: 71.87%;
  margin: 0 auto 64px;
  padding-top: 16px;

  @media #{$mq-tablet} {
    min-height: 306px;
    width: 92.18%;
  }

  @media #{$mq-mobile} {
    width: 78.93%;
    min-height: 306px;
  }

  .sliderTrackContainer--carousel {
    width: 96%;
    margin: 0 auto;

    @media #{$mq-tablet} {
      width: 95%;
    }
    @media #{$mq-mobile} {
      width: 87.03%;
    }

    .sliderTrack {
      column-gap: 16px;

      @media #{$mq-tablet} {
        column-gap: 12px;
      }

      @media #{$mq-mobile} {
        column-gap: 8px;
      }

      .slide--carousel {
        min-height: 543.4px;

        @media #{$mq-desktop} {
          min-height: 448px;
        }

        @media #{$mq-tablet} {
          min-height: 402.2px;
        }

        @media #{$mq-mobile} {
          min-height: 254.8px;
        }
      }
    }
  }

  .sliderLeftArrow--carousel {
    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-nicolly.svg") !important;
    background-repeat: no-repeat;
    width: 11.2px;
    height: 29.6px;
    .caretIcon--carousel {
      display: none;
    }
  }

  .sliderRightArrow--carousel {
    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-nicolly.svg") !important;
    width: 11.2px;
    height: 29.6px;
    .caretIcon--carousel {
      display: none;
    }
  }

  .paginationDotsContainer--carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    top: 100%;

    .paginationDot--carousel {
      background-color: $color-black0;
      width: 10px;
      height: 10px;

    }
    .paginationDot--carousel--isActive {
      width: 17px !important;
      height: 17px !important;
      background-color: $color-white;
      border: 0.5px solid $color-black0;
    }
  }
}