/* 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; } .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; }