@extends('client.raffles.layouts.app')
@section('content')
    <section class="about">
        <div class="services-banner">
            <img src="{{ asset('raffles/assets/images/backgrounds_general/achievements-banner.png') }}" width="1425"
                height="356" alt="interview preparation">

        </div>

        <section class="section ">
            <div class="flex flex-col gap-5 justify-center items-center text-center">
                <h2 class="text-60 md:text-30 text-brand">Achievements</h2>
                <img class="w-20percent" src="{{ asset('raffles/assets/images/icons/line.png') }}" alt="">

            </div>
        </section>
        <!-- first row  -->
        <section class="lqd-section text-box-image pt-40 pb-30">
            <div class="container">
                <div class="row pb-20">
                    @foreach ($page->custom as $index => $data)
                        <div class="col col-sm-6 col-md-4">
                            <a href="" class="flex flex-col gap-20 p-20 blog-post">
                                <div class="w-100percent h-210 overflow-hidden rounded-16">
                                    <img class="w-full h-full object-cover rounded-16"
                                        src="{{ asset($page->images[$index]) }}" alt="">
                                </div>
                                <div>
                                    <h2 class="text-20 text-ter text-center">{{ $data['key'] ?? '' }} </h2>
                                </div>
                            </a>
                        </div>
                    @endforeach

                </div>

            </div>
        </section>

    </section>
@endsection