@extends('partials.components.section', ['align' => $section['section_settings_display'] == 'list' ? 'left' : 'center', 'sectionClass' => $section['section_settings_display'] != 'list' && !$section['section_fields_title'] && !$section['section_fields_suptitle'] && !$section['section_fields_intro'] ? '!pt-0' : ''])

@section('section')
    @if ($section['section_settings_display'] == 'list')
        <ul class="{{ $margeAround }} flex flex-wrap gap-y-5">
            @foreach ($section['section_fields_list_icons'] as $item)
                <li
                    class="js-appear {{ count($section['section_fields_list_icons']) % 4 != 1 && count($section['section_fields_list_icons']) % 3 != 0 ? 'sm:w-1/4' : 'sm:w-1/3' }} xs:w-1/2 w-full pr-5 md:pr-10">
                    <div
                        class="border-accent relative z-0 h-full translate-y-1 items-center gap-4 border-l-[2px] pl-4 lg:pl-7">
                        @include('partials.items.list-icon')
                    </div>
                </li>
            @endforeach
        </ul>
    @else
        <ul class="{{ $margeAround }} z-10 flex flex-wrap justify-center !gap-y-5">
            @foreach ($section['section_fields_list_icons'] as $item)
                <li
                    class="js-appear {{ count($section['section_fields_list_icons']) % 4 != 1 && count($section['section_fields_list_icons']) % 3 != 0 ? 'sm:w-1/4' : 'sm:w-1/3' }} xs:w-1/2 flex w-full flex-col pr-5 md:pr-10">
                    <div
                        class="z-10 flex w-full grow flex-col justify-center gap-4 rounded-bl-lg rounded-tr-lg bg-white p-5 text-center shadow lg:p-8">
                        @include('partials.items.list-icon', ['alignCenter' => true, 'big' => true])
                    </div>
                </li>
            @endforeach
        </ul>
    @endif
@overwrite