challenge-vtex-io-bernardo-waldhelm/styles/css/vtex.slider-layout.css

/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
/* Grid breakpoints */
.sliderLayoutContainer--carousel {
  background: unset;
  width: 71.87%;
  margin: 0 auto 64px;
  padding-top: 16px;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .sliderLayoutContainer--carousel {
    min-height: 306px;
    width: 92.18%;
  }
}
@media (min-width: 280px) and (max-width: 768px) {
  .sliderLayoutContainer--carousel {
    width: 78.93%;
    min-height: 306px;
  }
}
.sliderLayoutContainer--carousel .sliderTrackContainer--carousel {
  width: 96%;
  margin: 0 auto;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .sliderLayoutContainer--carousel .sliderTrackContainer--carousel {
    width: 95%;
  }
}
@media (min-width: 280px) and (max-width: 768px) {
  .sliderLayoutContainer--carousel .sliderTrackContainer--carousel {
    width: 87.03%;
  }
}
.sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack {
  column-gap: 16px;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack {
    column-gap: 12px;
  }
}
@media (min-width: 280px) and (max-width: 768px) {
  .sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack {
    column-gap: 8px;
  }
}
.sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack .slide--carousel {
  min-height: 543.4px;
}
@media (min-width: 1025px) and (max-width: 1920px) {
  .sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack .slide--carousel {
    min-height: 448px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack .slide--carousel {
    min-height: 402.2px;
  }
}
@media (min-width: 280px) and (max-width: 768px) {
  .sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack .slide--carousel {
    min-height: 254.8px;
  }
}
.sliderLayoutContainer--carousel .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;
}
.sliderLayoutContainer--carousel .sliderLeftArrow--carousel .caretIcon--carousel {
  display: none;
}
.sliderLayoutContainer--carousel .sliderRightArrow--carousel {
  background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-nicolly.svg") !important;
  width: 11.2px;
  height: 29.6px;
}
.sliderLayoutContainer--carousel .sliderRightArrow--carousel .caretIcon--carousel {
  display: none;
}
.sliderLayoutContainer--carousel .paginationDotsContainer--carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 100%;
  column-gap: 12px;
  margin-top: 32px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
  .sliderLayoutContainer--carousel .paginationDotsContainer--carousel {
    margin-top: 16px;
  }
}
.sliderLayoutContainer--carousel .paginationDotsContainer--carousel .paginationDot--carousel {
  background-color: #000;
  width: 10px;
  height: 10px;
  margin: 0;
  padding: 0;
}
.sliderLayoutContainer--carousel .paginationDotsContainer--carousel .paginationDot--carousel--isActive {
  width: 17px !important;
  height: 17px !important;
  background-color: #fff;
  border: 0.5px solid #000;
}