/*  CARDS CAROUSEL CUSTOM STYLES */
#cards-carousel .card {
  margin-bottom: 2rem;
  border: unset;
}

#cards-carousel .card-body {
  padding: 1rem 25px;
  height: 100%;
  /* Set a fixed height for the card body */
  display: flex;
  flex-direction: column;
}

#cards-carousel .card-title {
  font-size: 2.35rem;
  line-height: 2rem;
  margin-bottom: 1rem;
}

#cards-carousel .card-img-top {
  min-height: 225px;
  max-height: 225px;
}

#cards-carousel .card-text {
  font-size: 1rem;
  line-height: 1.5rem;
}

/* Flickity custom styles */
#cards-carousel .main-carousel .carousel-cell {
  width: calc(33.3333% - 30px);
  margin-right: 15px;
  margin-bottom: auto;
  margin-top: auto;
}

#cards-carousel .main-carousel .carousel-cell.is-selected {
  background: transparent;
  color: white;
  box-shadow: none;
}

/* MEDIA QUERIES */
/* btns orientation lg screen */
@media (max-width: 1199.98px) {
  #cards-carousel .cards-carousel__btn-container > div:first-child {
    flex-direction: column;
  }

  #cards-carousel .cards-carousel__btn-container > div > a:first-child {
    margin-bottom: 5px;
    margin-right: 0px !important;
  }
}

/* Adjust carousel cell width for medium and small screens */
@media (max-width: 991.98px) {
  #cards-carousel .main-carousel .carousel-cell {
    /* Two cells per row with 30px spacing */
    width: calc(50% - 30px);
    /* margin-right: 15px; */
  }

  /* btns orientation */
  #cards-carousel .cards-carousel__btn-container > div:first-child {
    flex-direction: row;
  }

  #cards-carousel .cards-carousel__btn-container > div > a:first-child {
    margin-bottom: unset;
    margin-right: 0.5rem !important;
  }
}

/* Adjust carousel cell width for extra small screens */
@media (max-width: 767.98px) {
  #cards-carousel .main-carousel .carousel-cell {
    /* One cell per row with 30px spacing */
    width: calc(100% - 30px);
    /* margin-right: 15px; */
  }
}

/* hide btns when mobile */
@media (max-width: 575.98px) {
  #cards-carousel .flickity-prev-next-button {
    display: none;
  }
}
