.rm-div, .rm-div-independent {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

/* Inner content with smooth expand/collapse */
.rm-div .innr, .rm-div-independent .innr {
  position: relative;
  overflow: hidden;
  max-height: 200px; /* collapsed height */
  transition: max-height 0.8s ease-in-out;
}

/* Expanded state */
.rm-div .innr.expanded, .rm-div-independent .innr.expanded {
  max-height: 2000px; /* large enough to fit full content */
  transition: max-height 0.8s ease-in-out;
}

/* Fade overlay at bottom when collapsed */
.rm-div .innr::after, .rm-div-independent .innr::after  {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 15px;
  background: linear-gradient(to top, var(--fade-bg) 70%, transparent);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Hide fade when expanded */
.rm-div .innr.expanded::after, .rm-div-independent .innr.expanded::after {
  opacity: 0;
}

/* Button styling */
.rm-div .read-more-btn, .rm-div-independent .read-more-btn {
  margin-top: auto;
  margin-left: 25px;
  border: none;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease;
}



.rm-div .innr.expanded + .read-more-btn, .rm-div-independent .innr.expanded + .read-more-btn {
  margin-top: auto;
}

.read-more-btn:hover {
  background: var(--color-primary);
}

/* Button margin different if the columns expand independently */
.rm-div-independent .read-more-btn {
  margin-top: 10px; 
  margin-left: 25px;
  border: none;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease;
}