Location Based Hero

<!DOCTYPE html>
<title>My Example</title>

<style>
    :root {
        --lbh-padding: 4rem 1.5rem;
        --lbh-bg-color: #f8fafc;
        --lbh-text-color: #475569;
        --lbh-headline-color: #0f172a;
        --lbh-accent-color: #4338ca;
        --lbh-cta-bg: #4338ca;
        --lbh-cta-hover-bg: #3730a3;
        --lbh-cta-text-color: #ffffff;
        --lbh-max-width: 1024px;
    }
    .location-hero {
        box-sizing: border-box;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        background-color: var(--lbh-bg-color);
        padding: var(--lbh-padding);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .location-hero * {
         box-sizing: border-box;
    }
    .location-hero-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
        max-width: var(--lbh-max-width);
        width: 100%;
        align-items: center;
    }
    .location-hero-content {
        text-align: center;
    }
    .location-hero-content .event-venue {
        font-size: 0.9rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--lbh-accent-color);
        margin: 0;
    }
    .location-hero-content .event-title {
        font-size: clamp(2rem, 5vw, 2.75rem);
        color: var(--lbh-headline-color);
        font-weight: 700;
        line-height: 1.2;
        margin: 0.5rem 0 1rem;
    }
    .location-hero-content .event-address {
        font-size: 1.1rem;
        color: var(--lbh-text-color);
        line-height: 1.6;
        margin: 0 0 2rem;
    }
    .location-hero-content .cta {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background-color: var(--lbh-cta-bg);
        color: var(--lbh-cta-text-color);
        padding: 0.8rem 1.8rem;
        border-radius: 8px;
        border: none;
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .location-hero-content .cta:hover {
        background-color: var(--lbh-cta-hover-bg);
    }
    .location-hero-content .cta svg {
        width: 1.2em;
        height: 1.2em;
    }
    .location-hero-map .map-image {
        width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        object-fit: cover;
    }
    @media (min-width: 768px) {
        .location-hero-container {
            grid-template-columns: 1fr 1fr;
        }
        .location-hero-content {
            text-align: left;
        }
    }
</style>

<section class="location-hero">
    <div class="location-hero-container">
        <div class="location-hero-content">
            <p class="event-venue">Event Venue</p>
            <h1 class="event-title">The Atrium Innovation Hub</h1>
            <p class="event-address">742 Evergreen Terrace<br>Springfield, IL 62704</p>
            
            <a href="#" class="cta" role="button">
                <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" /></svg>
                Get Directions
            </a>
        </div>
        <div class="location-hero-map">
            
            <img src="https://placehold.co/600x450/e2e8f0/475569?text=Map+of+Venue" 
                 alt="A map showing the location of The Atrium Innovation Hub." 
                 class="map-image">
        </div>
    </div>
</section>