Refactor FancyHeader to Use CSS Grid for Dynamic Height

[betsyecastro]

Replaces the fixed-height background-image approach with an <img> tag and CSS Grid. This allows the header height to adjust dynamically based on either the image or the content, whichever is taller.
Changes

• Replaced inline background-image style with <img class="banner-img"> element
• Used CSS Grid to layer the image and content on top of each other in the same cell
• Removed fixed height: 85vh in favor of dynamic sizing
• Added object-fit: cover and object-position: center for consistent image scaling
• Removed max-height and overflow-y: auto from .contact_info to let content flow naturally
• Overrode .profile-header padding and background on .fancy_header to prevent style conflicts

[betsyecastro]

The last commit hides the banner image on screens below lg breakpoint (992px).