.eip-carousel {
  text-align: center;
}

.eip-carousel__container {
  max-width: 100%;
  margin: auto;
  display: flex;
  align-items: center;
}

.eip-carousel__viewport {
  overflow: hidden;
  width: 100%;
}

.eip-carousel__track {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}

.eip-carousel__card img {
    border-radius: 16px;
}

.eip-carousel__card {
    padding: 20px;
    width: 320px;
    height: 275px;
    background: #ffffff;
    border: 1px solid #e7d6d6;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0.4;
    transform: scale(0.85);
    transition: all 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.eip-carousel__card.is-active {
  opacity: 1;
  background: #fff;
  box-shadow: 0px 0px 14px #c8bbd5c2;
  width: 600px;
  height: 500px;
  margin: 0 5%;
  border-radius: 20px;
  border: none;

}
.eip-carousel__card.is-active::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px; /* border width */
    border-radius: 18px;
    pointer-events: none;
    /* SAME COLOR COMBINATION */
    background-image: radial-gradient(
        transparent,
        transparent,
        #FF7B00,
        #FE530E,
        #F04D86,
        #7367FD,
        transparent,
        transparent
    );

    background-size: 300% 300%;
    animation: shine 8s linear infinite;

    /* Mask trick (same as reference div) */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

/* Animation */
@keyframes shine {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

button.eip-carousel__nav.left {
    position: absolute;
    left: 27%;
    z-index: 10;
    font-size: 45px;
    color: #FF7B00;
    font-weight: 700;
}
button.eip-carousel__nav.right {
    position: absolute;
    left: 72%;
    z-index: 10;
    font-size: 45px;
    color: #FF7B00;
    font-weight: 700;
}
.eip-carousel__card h3 {
    font-size: 22px;
    margin: 10px 2px;
}
.eip-carousel__card p {
    font-size: 10px;
}
.eip-carousel__card.is-active h3 {
    font-size: 30px !important;
    margin: 20px 0px;
    font-weight: 700;
}
.eip-carousel__card.is-active p {
   font-size: 16px !important;
}

@media (max-width: 767px) {

  /* let card fit mobile screen */
  .eip-carousel__card,
  .eip-carousel__card.is-active {
    width: 70%;
    height: auto;
    margin: 0;
    transform: scale(1);
  }
  .eip-carousel__card.is-active {
  box-shadow: 1px 1px 5px #c8bbd5c2;
  }

  /* hide non-active cards visually */
  .eip-carousel__card {
    display: none;
    pointer-events: none;
  }

  .eip-carousel__card.is-active {
    display: block;
    padding: 16px;
  }

  /* image responsive */
  .eip-carousel__card img {
    width: 100%;
    height: auto;
    border-radius: 15px;
  }

  /* arrows: move from desktop % to edges */
  button.eip-carousel__nav.left {
    left: 10px;
    font-size: 32px;
  }

  button.eip-carousel__nav.right {
    left: auto;
    right: 10px;
    font-size: 32px;
  }

  /* text scaling only (no new styles) */
  .eip-carousel__card.is-active h3 {
    font-size: 22px !important;
  }

  .eip-carousel__card.is-active p {
    font-size: 14px !important;
    line-height: 20px;
  }
  .eip-carousel {
    padding: 20px 0px;
}
.eip-carousel__track{
      height: auto;
}
}