html,
body {
  position: relative;
  height: 100%;
  background-color: #4d0033; /* Dark purple background */
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper {
  width: 90vw;
  height: 90vh;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}
.heart {
    position: absolute;
    z-index: -1;
    --c: #FF5252;
    width: 150px;
    aspect-ratio: 1;
    background:
     /* 1 */ radial-gradient(circle at 60% 65%,var(--c) 64%,#fd5a5a00 65%) top left/50% 50%,
     /* 2 */ radial-gradient(circle at 40% 65%,var(--c) 64%,#0000 65%) top right/50% 50%,
     /* 3 */ conic-gradient(from -45deg at 50% 85.5%,var(--c) 90deg,#0000 0) bottom/100% 50%;
    opacity: 0.2;
    background-repeat: no-repeat;
}

.swiper-slide:nth-child(1n) {
  background-color: #a00037; /* Dark red */
}

.swiper-slide:nth-child(2n) {
  background-color: #660033; /* Dark pink */
}

.swiper-slide:nth-child(3n) {
  background-color: #8c0049; /* Dark magenta */
}

.swiper-slide:nth-child(4n) {
  background-color: #a00037; /* Dark red */
}

.swiper-slide:nth-child(5n) {
  background-color: #8c0049; /* Dark magenta */
}

.swiper-slide:nth-child(6n) {
  background-color: #660033; /* Dark pink */
}

.swiper-slide:nth-child(7n) {
  background-color: #a00037; /* Dark red */
}

.swiper-slide:nth-child(8n) {
  background-color: #8c0049; /* Dark magenta */
}

.swiper-slide:nth-child(9n) {
  background-color: #a00037; /* Dark red */
}

.swiper-slide:nth-child(10n) {
  background-color: #660033; /* Dark pink */
}