.slide-items img {
  max-width: 100%;
  display: block;
}

.slide {
  max-width: 380px;
  margin: 20px auto;
  display: grid;
  box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.4);
}

.slide-items {
  position: relative;
  grid-area: 1/1;
  border-radius: 5px;
  overflow: hidden;
}

.slide-nav {
  grid-area: 1/1;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
}

.slide-nav button {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  opacity: 0;
}

.slide-items > * {
  position: absolute;
  top: 0px;
  opacity: 0;
  pointer-events: none;
}

.slide-items > .active {
  position: relative;
  opacity: 1;
  pointer-events: initial;
}

.slide-thumb {
  display: flex;
  grid-column: 1 / 3;
}

.slide-thumb > span {
  flex: 1;
  display: block;
  height: 3px;
  background: grey;
  margin: 5px;
  border-radius: 3px;
  overflow: hidden;
}

.slide-thumb > span.active::after {
  content: '';
  display: block;
  height: inherit;
  background: red;
  border-radius: 3px;
  transform: translateX(-100%);
  animation: thumb 5s forwards linear;


}

@keyframes thumb {
  to {
    transform: initial;
  }
}

.slide-item video {
    width: 100%;
    height: 100%; /* Garante que o vídeo mantenha sua proporção */

    object-fit: cover; /* Redimensiona o vídeo para cobrir todo o contêiner mantendo sua proporção */
    object-position: center; /* Centraliza o vídeo horizontalmente e verticalmente */
}

.slide-item img {
    width: 100%;
    height: 100%; /* Garante que o vídeo mantenha sua proporção */

    object-fit: cover; /* Redimensiona o vídeo para cobrir todo o contêiner mantendo sua proporção */
    object-position: center; /* Centraliza o vídeo horizontalmente e verticalmente */
}

.carousel-item{
	padding: 5px;
	width: 200px;
	display: inline-block;
}

        /* Estilos personalizados para o slider */
        .swiper {
            width: 100%;
            /*height: 140px;*/
            display: none; /* Esconder por padrão */
        }
        .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Para as imagens ocuparem todo o slide */

            border-radius: 20px;
        }

        .swiper-pagination-bullet {
            background-color: pink; /* Cor rosa para as bolinhas inativas */
        }

        .swiper-pagination-bullet-active {
            background-color: deeppink; /* Cor rosa mais forte para a bolinha ativa */
        }

        /* Apenas mostrar o slider em telas menores (mobile) */
        @media only screen and (max-width: 768px) {
            .swiper {
                display: block;
            }

            .desktop {
                display: none;
            }
        }