sl-card::part(base) {
  display: flex;
  flex-direction: column;
  height: 100%; /* Ensures the card itself stretches */
  transition: all 0.1s ease-in-out; /* Smooth transition */
}

sl-card:hover::part(base) {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Elevation effect */
  transform: translateY(-5px); /* Slight lift effect */
  cursor: pointer;
}

.card-content {
  flex-grow: 1; /* Ensures content inside grows to fill */
}

.card-header {
  font-weight: bold;
}