.carousel {
  @apply relative flex items-center w-full lg:h-128 h-160 overflow-hidden;

  @media (max-width: 64rem) {
    @apply bg-[url('/src/assets/images/carousel/bg-carousel.svg')];
  }
}

/* Container Images Carousel */
.carousel-list {
  @apply flex items-center max-lg:h-128;

  @media (max-width: 64rem) {
    @apply grid grid-cols-[100vw_100vw_100vw];

    /* Define que cada coluna deve ocupar o tamanho da tela inteira */

    div {
      @apply justify-center;
    }
  }
}

.carousel-item {
  /* @apply flex items-center justify-center w-full h-full transition-transform duration-500 ease-in-out; */
  @apply bg-cover bg-center w-screen h-128;
  @apply transition-transform duration-500 ease-in-out;
  @apply flex flex-col justify-center;
}

.carousel-item {
  @media (max-width: 64rem) {
    /* @apply bg-size-[50%] bg-no-repeat my-20 rounded-full border; */
    @apply h-3/4 rounded-4xl;
  }
}

.carousel-item:nth-child(1) {
  @apply lg:bg-[url('/src/assets/images/carousel/1.svg')];

  @media (max-width: 64rem) {
    @apply col-start-1 -mt-10;

    .carousel-content {
      @apply bg-[url('/src/assets/images/carousel/1m.svg')] bg-no-repeat bg-cover bg-center;
    }
  }
}

.carousel-item:nth-child(2) {
  @apply lg:bg-[url('/src/assets/images/carousel/2.svg')] max-lg:col-start-2;

  @media (max-width: 64rem) {
    .carousel-content {
      @apply bg-[url('/src/assets/images/carousel/2m.svg')] bg-no-repeat bg-cover bg-center;
    }
  }
}

.carousel-item:nth-child(3) {
  @apply lg:bg-[url('/src/assets/images/carousel/3.svg')] max-lg:col-start-3;

  @media (max-width: 64rem) {
    .carousel-content {
      @apply bg-[url('/src/assets/images/carousel/3m.svg')] bg-no-repeat bg-cover bg-center;
    }
  }
}

.carousel-content {
  @apply text-center w-1/2 lg:ml-10;

  h4 {
    @apply text-accent lg:text-5xl font-semibold;
  }

  button {
    @apply bg-accent text-white lg:text-4xl py-3 px-12 rounded-xl mt-7 shadow-xl cursor-pointer;
  }

  @media (max-width: 64rem) {
    @apply rounded-4xl h-128 w-3/4 sm:w-1/2 mx-auto;

    h4 {
      @apply text-2xl mt-8 px-10;
    }

    button {
      @apply hidden;
    }
  }
}

.carousel-button {
  @apply lg:mx-30 absolute z-10 flex items-center justify-center w-10 h-10 rounded-full opacity-100 cursor-pointer;
}

.dots-carousel {
  @apply flex gap-3 left-1/2 w-full bottom-4 transform -translate-x-1/2 max-lg:mb-15;
}

.dot {
  @apply w-5 h-5 border border-accent rounded-full cursor-pointer;
}

.dot.active {
  @apply bg-accent;
}

.mobile-button {
  @apply lg:hidden absolute bottom-5 left-1/4 w-1/2 h-12 bg-accent text-white text-2xl font-semibold rounded-xl shadow-xl cursor-pointer;
}

.prev-button {
  @apply left-4;
}

.next-button {
  @apply right-4;
}