<div class="o-hero  o-hero--main">
    <div class="o-hero__main">
        {{--        <img class="o-hero__image" sizes="(max-width: 1920px) 100vw, 1920px" alt=""--}}
        {{--             srcset="--}}
        {{--                    /img/home/farmfun-020.jpg 460w,--}}
        {{--                    /img/home/farmfun-025.jpg 575w,--}}
        {{--                    /img/home/farmfun-050.jpg 1200w,--}}
        {{--                    /img/home/farmfun-075.jpg 1680w"--}}
        {{--             src="/img/home/farmfun.jpg">--}}

        <div class="o-hero__video">
            @include('site.components.video', [
                'videoLink' => $video_id,
                'videoAutoplay' => true,
                'videoDisableKB' => 1,
                'videoControls' => 0,
                'videoPlayerId' => 'home-hero-video',
                'videoLoop' => 1
            ])
        </div>

        <div class="o-hero__title-area" data-kal="slide-up">
            @if(!empty($title))<h1 class="o-hero__title">{!! $title !!}</h1>@endif
            @if(!empty($buttonLink) && !empty($buttonText))
                @include('site.components.button', [
                       'buttonLink' => $buttonLink,
                       'buttonText' => $buttonText,
               ])
            @endif
            <div class="o-hero__rating">
                @include('site.components.rating', ['modifiers' => ['boxed']])
            </div>

        </div>

    </div>
</div>

@if(isset($certaintiesItems))
<div class="u-slant-top u-mb-neg-slant-height u-bg-primary--500">
    <div class="l-contain  o-component-area__component">
        @include('site.organisms.sevenCertainties', [
           'items' => $certaintiesItems
        ])
    </div>
</div>
@endif

<div class="u-slant-top-reversed u-mt-neg-slant-height   u-bg-neutral--0"></div>