/* Contém o carrossel na mesma largura do .container do Bootstrap 5 */
.slick-slider {
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

@media (min-width: 576px) {
    .slick-slider { max-width: 540px; }
}
@media (min-width: 768px) {
    .slick-slider { max-width: 720px; }
}
@media (min-width: 992px) {
    .slick-slider { max-width: 960px; }
}
@media (min-width: 1200px) {
    .slick-slider { max-width: 1140px; }
}
@media (min-width: 1400px) {
    .slick-slider { max-width: 1320px; }
}

/* Garante que a imagem respeite o container */
.slick-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* O wrapper precisa ser a referência de posicionamento */
.slick-wrapper {
    position: relative;
}

/* Contém a barra de setas na mesma largura do container/slider */
nav.slick__arrow {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    pointer-events: none;
    z-index: 20;
}

@media (min-width: 576px) {
    nav.slick__arrow { max-width: 540px; }
}
@media (min-width: 768px) {
    nav.slick__arrow { max-width: 720px; }
}
@media (min-width: 992px) {
    nav.slick__arrow { max-width: 960px; }
}
@media (min-width: 1200px) {
    nav.slick__arrow { max-width: 1140px; }
}
@media (min-width: 1400px) {
    nav.slick__arrow { max-width: 1320px; }
}

/* Posiciona as setas dentro do nav, coladas nas bordas do slide */
nav.slick__arrow .slick-prev,
nav.slick__arrow .slick-next {
    pointer-events: auto;
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
}

nav.slick__arrow .slick-prev {
    left: 10px !important;
    right: auto !important;
}

nav.slick__arrow .slick-next {
    right: 10px !important;
    left: auto !important;
}