@extends('partials.components.section', ['align' => 'center'])

@section('section')
    @foreach ($section['section_fields_cards'] as $card)
        <div class="{{ $grid }} my-10 grid-cols-12 gap-5">
            <div
                class="{{ $loop->even ? 'md:order-2' : 'lg:col-start-2' }} relative z-10 col-span-12 flex flex-col justify-center overflow-hidden rounded-sm p-5 md:col-span-6 md:p-8 lg:col-span-5">
                <div class="absolute inset-0 -z-10 opacity-15"
                    style="background-color: {{ $card['color'] ?? 'var(--color-light)' }}"></div>
                @if ($card['title'] ?? false)
                    @include('partials.components.medium-title', [
                        'title' => $card['title'],
                        'style' => 'style="color: ' . ($card['color'] ?? 'var(--color-body)') . ';"',
                    ])
                @endif
                {!! $card['text'] ?? '' !!}
            </div>
            @if ($card['image'] ?? false)
                <div class="{{ $loop->even ? 'lg:col-start-2' : '' }} col-span-12 md:col-span-6 lg:col-span-5">
                    {!! ResponsivePics::get_image(
                        $card['image'],
                        'xs:600, md:1024,lg:1440',
                        0.75,
                        'w-full h-full object-cover rounded-sm aspect-4/3',
                        false,
                        true,
                    ) !!}
                </div>
            @endif
        </div>
    @endforeach
@overwrite