스와이프 리액트에서 반응형 세팅

<Swiper
              className="my-custom-swiper"
              modules={[Scrollbar]}
              spaceBetween={20}
              slidesPerView={1.5}
              scrollbar={{ draggable: true }}
              breakpoints={{
                768: {
                  slidesPerView: 2.5,
                  spaceBetween: 15,
                },
                1024: {
                  slidesPerView: 3.5,
                  spaceBetween: 10,
                },
              }}
            >
              <ul className="flex w-7/12 ">
                {promotionData &&
                  title === "프로모션" &&
                  promotionData
                    .filter((v) => v.priceSales > 0)
                    .map((value, index) => (
                      <SwiperSlide key={index}>
                        <li className="group w-full  pb-8">
                          <figure className=" mt-14 h-[50vw] w-full md:h-[30vw]   lg:h-[25vw] ">
                            <img
                              className="h-full w-full  cursor-pointer"
                              src={`http://127.0.0.1:9090/uploads/${value.cover}`}
                            />
                          </figure>
                          <figcaption className="mt-6 flex cursor-pointer flex-col text-xs md:text-sm">
                            <span>
                              {value.title && value.title.split("/")[0]}
                            </span>
                            <span className="mt-2 font-bold">
                              {value.title && value.title.split("/")[1]}
                            </span>
                            <span className="mt-3 text-xs text-gray-400 md:text-xs">
                              {value.productVolume && value.productVolume}
                            </span>
                            <span className="mt-3 flex items-center justify-start space-x-2">
                              <span className="line-through ">
                                $
                                {value.originalPrice &&
                                  Number(value.originalPrice).toLocaleString()}
                              </span>{" "}
                              <span className="text-main hover:text-accent">
                                $
                                {value.priceSales || value.originalPrice
                                  ? Number(value.priceSales).toLocaleString()
                                  : Number(
                                      value.originalPrice,
                                    ).toLocaleString()}
                              </span>
                            </span>
                          </figcaption>
                          <div className="mx-auto my-4 w-full cursor-pointer border  py-2 text-center text-xs hover:bg-font hover:text-back md:opacity-0 md:group-hover:opacity-100 lg:text-sm">
                            카트에 담기
                          </div>
                        </li>
                      </SwiperSlide>
                    ))}