Vehicle Navbar

<nav class="c-vehicle-navbar | o-navbar">
    <div class="o-wrapper">
        <div class="o-navbar__wrapper">
            <div class="c-vehicle-navbar__title | o-navbar__left">
                <div class="o-media | u-w-100%">
                    <a class="c-vehicle-navbar__thumb | o-media__img | u-mr-sm" href="#content">
                        <img class="c-img | u-aspect--3x2"
                            srcset="/assets/img/ds/layouts/vehicle/navbar/90x60-346474.webp 90w, 
                                    /assets/img/ds/layouts/vehicle/navbar/180x120-346474.webp 180w, 
                                    /assets/img/ds/layouts/vehicle/navbar/300x200-346474.webp 300w"
                            loading="lazy"
                            width="72" height="48" alt
                        >
                    </a>
                    <div class="o-media__body | u-removed-<bp3">
                        <span class="u-heading u-mb-0 u-trunc">R8 Coupe</span>
                        <span class="u-fw-500 u-fs-sm u-trunc">5.2 FSI V10 Quattro Performance 2dr S Tronic</span>
                    </div>
                </div>
            </div>
            <div class="o-navbar__right | u-flex u-align-middle u-justify-right">
                <div class="c-vehicle-navbar__price | u-right u-mr-sm u-w-10-@bp4 u-removed-<bp2">
                    <span class="u-block u-tc-info u-fw-500 u-trunc">Price: £90,000</span>
                    <span class="u-block u-tc-purple-900 u-fw-500 u-trunc">Monthly: £1,985</span>
                </div>
                <button class="c-btn c-btn--tertiary t-btn-fav | u-mr-sm" 
                        x-data="{ fav: false }" 
                        @click="fav = ! fav" 
                        :class="fav ? 'is-active' : 'is-inactive'"
                >
                    <span class="u-hidden" x-show.important="fav == true" style="display: none">Remove from Favourites</span>
                    <span class="u-hidden" x-show.important="fav != true">Add to Favourites</span>
                    <svg class="c-icon t-star-remove" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav == true" style="display: none">
                        <path stroke-linecap="round" stroke-width="1.5" d="m8.995 12.527 5.99-.027"/>
                        <path fill-rule="nonzero" d="M7.31 1.103a.75.75 0 0 1 1.378 0l1.82 4.221 4.793.324a.75.75 0 0 1 .505 1.252l-.075.072L13.304 9H9.499a3.5 3.5 0 0 0-3.495 3.308L6 12.5c0 .488.1.953.28 1.375l-2.25 1.389a.75.75 0 0 1-1.142-.685l.013-.1.909-4.549L.27 6.972a.75.75 0 0 1 .327-1.31L.7 5.648l4.792-.324 1.82-4.22Z"/>
                    </svg>
                    <svg class="c-icon t-star-add" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav != true">
                        <g fill="none" fill-rule="evenodd">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14.307 7.185.943-.788-5.249-.355L7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985 2.735-1.688"/>
                            <path stroke-linecap="round" stroke-width="1.5" d="M12 8.498v6.001M9 11.5h6"/>
                        </g>
                    </svg>
                </button>
                <a class="c-btn c-btn--primary | u-w-12-@bp4" href="#">Buy Now</a>
                <a class="c-btn c-btn--secondary | u-w-12-@bp4 u-removed-<bp4 u-ml-sm" href="#">Ask a Question</a>
            </div>
        </div>
    </div>
</nav>

<section data-sticky="content">
    <!-- Navbar -->
    <nav class="c-vehicle-navbar | o-navbar | u-fix u-fix--revealed | is-unfixed" data-sticky="element">
        <div class="o-wrapper">
            <div class="o-navbar__wrapper">
                <div class="c-vehicle-navbar__title | o-navbar__left | u-flex u-align-middle">
                    <div class="o-media | u-w-100%">
                        <a class="c-vehicle-navbar__thumb | o-media__img | u-mr-sm" href="#content">
                            <img class="c-img | u-aspect--3x2"
                                srcset="/assets/img/ds/layouts/vehicle/navbar/90x60-346474.webp 90w, 
                                        /assets/img/ds/layouts/vehicle/navbar/180x120-346474.webp 180w, 
                                        /assets/img/ds/layouts/vehicle/navbar/300x200-346474.webp 300w"
                                loading="lazy"
                                width="72" height="48" alt
                            >
                        </a>
                        <div class="o-media__body | u-removed-<bp3">
                            <span class="u-heading u-mb-0 u-trunc">R8 Coupe</span>
                            <span class="u-fw-500 u-fs-sm u-trunc">5.2 FSI V10 Quattro Performance 2dr S Tronic</span>
                        </div>
                    </div>
                </div>
                <div class="o-navbar__right | u-flex u-align-middle u-justify-right">
                    <div class="c-vehicle-navbar__price | u-right u-mr-sm u-w-10-@bp4 u-removed-<bp2">
                        <span class="u-block u-tc-info u-fw-500 u-trunc">Price: £90,000</span>
                        <span class="u-block u-tc-purple-900 u-fw-500 u-trunc">Monthly: £1,985</span>
                    </div>
                    <button class="c-btn c-btn--tertiary t-btn-fav | u-mr-sm" 
                            x-data="{ fav: false }" 
                            @click="fav = ! fav" 
                            :class="fav ? 'is-active' : 'is-inactive'"
                    >
                        <span class="u-hidden" x-show.important="fav == true" style="display: none">Remove from Favourites</span>
                        <span class="u-hidden" x-show.important="fav != true">Add to Favourites</span>
                        <svg class="c-icon t-star-remove" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav == true" style="display: none">
                            <path stroke-linecap="round" stroke-width="1.5" d="m8.995 12.527 5.99-.027"/>
                            <path fill-rule="nonzero" d="M7.31 1.103a.75.75 0 0 1 1.378 0l1.82 4.221 4.793.324a.75.75 0 0 1 .505 1.252l-.075.072L13.304 9H9.499a3.5 3.5 0 0 0-3.495 3.308L6 12.5c0 .488.1.953.28 1.375l-2.25 1.389a.75.75 0 0 1-1.142-.685l.013-.1.909-4.549L.27 6.972a.75.75 0 0 1 .327-1.31L.7 5.648l4.792-.324 1.82-4.22Z"/>
                        </svg>
                        <svg class="c-icon t-star-add" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav != true">
                            <g fill="none" fill-rule="evenodd">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14.307 7.185.943-.788-5.249-.355L7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985 2.735-1.688"/>
                                <path stroke-linecap="round" stroke-width="1.5" d="M12 8.498v6.001M9 11.5h6"/>
                            </g>
                        </svg>
                    </button>
                    <a class="c-btn c-btn--primary | u-w-12-@bp4" href="#">Buy Now</a>
                    <a class="c-btn c-btn--secondary | u-w-12-@bp4 u-removed-<bp4 u-ml-sm" href="#">Ask a Question</a>
                </div>
            </div>
        </div>
    </nav>

    <hr class="c-rule c-rule--dotted">
    <div class="o-wrapper | u-mt-sm">
        <small>Scroll past this point</small>
    </div>

    <section class="o-section o-section--xl"> 
        <div class="o-wrapper">
            <div class="o-grid">
                <div class="o-grid__item o-focus o-focus--lg">
                    <h2 class="u-heading u-epsilon u-fw-500">Title 2</h2>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> 
                </div>
            </div>
        </div>
    </section>
    <section class="o-section o-section--xl"> 
        <div class="o-wrapper">
            <div class="o-grid">
                <div class="o-grid__item o-focus o-focus--lg">
                    <h2 class="u-heading u-epsilon u-fw-500">Title 3</h2>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> 
                </div>
            </div>
        </div>
    </section>
</section>