.cs-carousel-wrapper {
  overflow: hidden;
}

/* Key Points Styling */
.cs-points-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-slider .slick-dots li button:before {
    font-size: 10px;
}

/* Desktop Strict Crop: 449x350 frame */
@media (min-width: 992px) {
  .cs-crop {
    width: 449px;
    height: 350px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
  }
  
  .cs-crop img {
    position: absolute;
    top: 0;
    /*max-width: none; /* Allow JS to scale past container */
  }
}

/* Mobile: Fluid layout */
@media (max-width: 991px) {
  .cs-media-column {
    justify-content: center;
    padding: 20px;
  }
  .cs-crop {
    width: 100%;
    height: auto;
  }
  .cs-crop img {
    position: static;
    width: 100%;
    height: auto;
  }
}

/* 1. Force Slick's internal track to use flex so children can stretch */
.slick-track {
  display: flex !important;
  align-items: stretch !important;
}

/* 2. Make the slide item and the card fill 100% height of the track */
.cs-slide-item {
  height: auto;
  display: flex !important;
}

.cs-card {
  width: 100%;
  display: flex;
  flex-direction: row; /* Desktop default */
  align-items: stretch; /* This forces columns to be equal height */
}

/* 3. Ensure columns fill the card height */
.cs-card > .col-lg-7,
.cs-card > .col-lg-5 {
  display: flex;
  flex-direction: column;
}

/* 4. Ensure the media column background fills the entire height */
.cs-media-column {
  flex: 1; /* Stretch to fill */
  background-color: var(---panel-bg);
  min-height: 350px; /* Maintains your minimum requirement */
}