<a href="#mmh-hook" class="c-mmh-cta  js-scroll-to-target">

    <figure class="c-mmh-cta__image">
        @if(isset($mmhCta->images) && $mmhCta->images->isNotEmpty())
            <img alt="{{$mmhCta->images->first()->name}}" src="{{ $mmhCta->images->first()->small_image_url }}"
                 data-object-fit="cover"/>
        @endif
    </figure>

    <div class="c-mmh-cta__main">

        <h4 class="c-mmh-cta__heading">@lang('site/global.monthly_must_have')</h4>
        <div class="c-mmh-cta__title">{{ $mmhCta->translation->name }}</div>
        @if(!empty($mmhCta->price))
            <div class="c-mmh-cta__price">{{ $mmhCta->price }}</div>
        @endif

    </div>

    <div class="c-mmh-cta__scroll-down">
        @include('site.components.scrollDown', [ 'scrollDownTextClasses' => 'c-mmh-cta__scroll-down-text']) 
    </div>

</a>