.cms-multicard-carousel .carousel-control-prev, .cms-multicard-carousel .carousel-control-next {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 24px !important;
  height: 24px !important;
}

.cms-multicard-carousel .carousel-control-prev {
  background-image: url("../../../../content/dam/thaiairways/images/icons/carousel-prev-arrow-white.png") !important;
}

.cms-multicard-carousel .carousel-control-next {
  background-image: url("../../../../content/dam/thaiairways/images/icons/carousel-next-arrow-white.png") !important;
}

.cms-multicard-carousel .carousel-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  top: 85%;
}

.cms-multicard-carousel .carousel-indicators [data-bs-target].active {
  width: 20px;
  height: 6px;
  border-top: none;
  border-bottom: none;
  border-radius: 5.2px;
  background-color: white;
}

.cms-multicard-carousel .carousel-indicators [data-bs-target] {
  width: 6px;
  height: 6px;
  border-top: none;
  border-bottom: none;
  border-radius: 100%;
}

.cms-multicard-carousel .card-headtitle,
.cms-multicard-carousel .card-overlay-title {
  color: var(--gray-text-invert, #fff);

  /* Desktop/H4 — Bold */
  font-family: "InterBold";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 30px */
}

.cms-multicard-carousel .card {
  min-width: 356px;
  height: 356px;
  border: none;
  border-radius: 0px !important;
  overflow: hidden;
}

.cms-multicard-carousel .card-text {
  width: 100%;
  height: fit-content;
  flex-shrink: 0;
  align-self: stretch;
  opacity: 1;

  color: var(--gray-text-invert, #fff);

  /* Body/Body — Regular */
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%; /* 25.6px */
}

.cms-multicard-carousel .carousel-controls-and-indicators {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 5%;
}

@media (min-width: 768px) {
  .cms-multicard-carousel .carousel-controls-and-indicators {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 5%;
  }

  .cms-multicard-carousel .card-headtitle,
  .cms-multicard-carousel .card-overlay-title {
    color: var(--gray-text-invert, #fff);

    /* Desktop/H4 — Bold */
    font-family: "InterBold";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 30px */
  }

  .cms-multicard-carousel .card {
    min-width: 266px;
    height: 400px;
    border: none;
    border-radius: 0px !important;
    overflow: hidden;
  }

  .cms-multicard-carousel .card-overlay-text {
    width: 100%;
    height: fit-content;
    flex-shrink: 0;
    align-self: stretch;
    opacity: 0.7;
  
    /* text-overflow: ellipsis;
      white-space: nowrap; */
  
    /* overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; */
  
    color: var(--gray-text-invert, #fff);
  
    /* Body/Body — Regular */
    font-family: "Inter";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
  }

  .cms-multicard-carousel .card:hover .card-img-overlay {
    opacity: 1;
    border-radius: 0px;
  }
    
  .cms-multicard-carousel .card:hover .card-headtitle {
    display: none;
  }
}

.cms-multicard-carousel .carousel-items-wrapper {
  display: flex;
  overflow-x: hidden; /* Hide any overflowed items */
}

.cms-multicard-carousel .img-gradient {
  width: 100%;
  height: 100%;

  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

.cms-multicard-carousel .card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;

  transition: transform 0.3s ease-in-out;
  border-radius: 0px;
}

.cms-multicard-carousel .card-img-overlay {
  background: radial-gradient(
    213.1% 213.1% at 54.75% 39.29%,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 100%
  );
  box-shadow: 3.328px 3.328px 12.482px 0px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(22px);

  margin-top: auto;
  height: fit-content;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 0px;
}

.cms-multicard-carousel .card-not-overlay {
  position: absolute;
  left: 0px;
  bottom: 32px;
  z-index: 1;
  padding: 24px;
}