.scrollable-modal .modal-content {
  --scroll-fadeIn-height: 2rem;
}

.scrollable-modal .modal-header::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 0;
  height: var(--scroll-fadeIn-height);
  width: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  z-index: 1;
}

.scrollable-modal .modal-footer::before {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 0;
  height: var(--scroll-fadeIn-height);
  width: 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  z-index: 1;
}

.scrollable-modal.modal .modal-body {
  padding-top: var(--scroll-fadeIn-height);
  padding-bottom: var(--scroll-fadeIn-height);
}