/* Equal height columns CSS */
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-wrap: wrap; /* Allow columns to wrap */
    /* Adjust row margins to match reduced column padding */
    margin-left: -5px;
    margin-right: -5px;
}
/* Apply to direct children columns */
.row-eq-height > [class*='col-'] {
    display: flex;
    flex-direction: column;
    /* Reduce horizontal padding to decrease gap between columns */
    padding-left: 8px;
    padding-right: 8px;
    /* Add some bottom margin for vertical spacing, especially when wrapping */
    margin-bottom: 16px;
}
/* Make panel fill the column height */
.row-eq-height > [class*='col-'] .panel {
    flex-grow: 1;
    display: flex; /* Use flex for panel content */
    flex-direction: column; /* Stack heading and body */
    margin-bottom: 0; /* Remove default panel margin if column adds margin */
}
.row-eq-height > [class*='col-'] .panel > .panel-body {
    flex-grow: 1; /* Allow panel body to take remaining space */
}

/* Mobile specific adjustments */
@media (max-width: 767px) {
    /* Add space above title on small screens */
    .main > h1 {
        margin-top: 15px;
    }
}