@extends('frontend.m9')

@section('content')
<div class="container" style="margin-top: 5%;">
<div class="ex-g-promo-column aem-GridColumn aem-GridColumn--default--12">
    <section class="ex-feed-column-container ex-feature s-use-seemore ex-feed-column-container--related-promo s-padding-top-none s-padding-bottom-none s-text-transition ex-feed-column-container--text-left bg-white s-visible s-motion">
        <div class="ex-feed-column-container__wrap"></div>
        <div class="ex-feed-column-container__wrap ex-feed-column-container--related-promo">
            @foreach ($explores as $explore)
                <div class="ex-promo-column ex-promo-column--text-left ex-promo-column--mo-text-left ex-promo-column-active">
                    <div class="ex-promo-column__inner">
                        <div class="ex-promo-column__img-wrap">
                            <div class="ex-promo-column__thumbnail">
                                <a an-tr="ex19_promo column-brand hub detail page-image-link" an-ca="content click" an-ac="feature" an-la="put mom in the picture #withgalaxy:image" href="{{ route('explore', $explore->id) }}">
                                    <div class="js-img-src picture image rounded">
                                        <img class="image__preview lazy-load responsive-img js-img-src" data-mobile-src="{{ asset('storage/uploads/explore/youtube_image') }}/{{ $explore->youtube_image }}" data-desktop-src="{{ asset('storage/uploads/explore/youtube_image') }}/{{ $explore->youtube_image }}"/>
                                        <img class="image__main lazy-load responsive-img js-img-src" data-mobile-src="{{ asset('storage/uploads/explore/youtube_image') }}/{{ $explore->youtube_image }}" data-desktop-src="{{ asset('storage/uploads/explore/youtube_image') }}/{{ $explore->youtube_image }}"/>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="ex-promo-column__content-info">
                            <div class="ex-items-promo__content-attr">
                                <p></p>
                            </div>
                        </div>
                        <div class="ex-promo-column__text">
                            <div class="ex-promo-column__eyebrow">
                                {{ $explore->main_title ?? '' }}
                            </div>
                            <div class="ex-promo-column__headline">
                                <a an-tr="ex19_promo column-brand hub detail page-text-title" an-ca="content click" an-ac="feature" an-la="put mom in the picture #withgalaxy:title" href="{{ route('explore', $explore->id) }}">
                                    <h2 class="s-font-sharpsans" tabindex="0" data-font-size-pc="24" data-font-size-mo="44">
                                        {{ $explore->title }}
                                    </h2>
                                </a>
                            </div>
                            <div class="ex-promo-column__sub-headline" data-font-size-pc="14" data-font-size-mo="28">
                                <a an-tr="ex19_promo column-brand hub detail page-text-title" an-ca="content click" an-ac="feature" an-la="put mom in the picture #withgalaxy:title" href="{{ route('explore', $explore->id) }}" >
                                    <p>{{ $explore->sub_title ?? '' }}.</p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>
</div>
</div>

@endsection