<div class="col-12 col-md-6 mt-0 mb-15">
    <div class="promobox promobox--type-04 position-relative d-flex flex-column align-items-center text-center">
        <div class="image-animation-trigger w-100">
            <a href="{{ $banner->link }}" class="w-100">

                <div class="image-animation image-animation--from-center image-animation--to-right">
                    <div class="rimage" style="padding-top:72.98245614035088%; min-height: 400px;">
                        <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" class="rimage__img rimage__img--cover rimage__img--fade-in lazyload"
                             data-master="{{ $banner->image() }}"
                             data-aspect-ratio="1.3701923076923077"

                             data-srcset="{{ $banner->image() }} 1x, {{ $banner->image() }} 2x"
                             data-scale-perspective="1.1"
                             alt="">
                    </div>
                </div>
            </a>
            <div class="promobox__content absolute-stretch d-flex flex-column flex-center px-15 py-7 overflow-hidden pointer-events-none">
                {{-- <p class="promobox__text-line-01 h5 mb-5">NEW ARRIVALS</p> --}}
                <p class="promobox__text-line-02 h2 mt-5 mb-0" style="color: {{ $banner->textColor() }};">{{ $banner->title }}</p>
                <p class="promobox__text-line-03 h6 mt-10 mb-0" style="color: {{ $banner->textColor() }};">{{ $banner->description }}</p>
                <a href="{{ $banner->link }}" class="promobox__btn btn px-20 mt-25 pointer-events-all btn--secondary">{{ __('DISCOVER MORE') }}</a>
            </div>
        </div>
    </div>
</div>
