<section class="sector-service-block"> {% if service.image %} <div class="banner-block pb-6 lazyBackgroundImage" data-mobile="{{ imageCache('/' ~ service.fullImagePath, 'zoomCrop', 900, 405) }}" data-desktop="{{ imageCache('/' ~ service.fullImagePath, 'zoomCrop', 3200, 1440) }}"> <div class="container h-full"> <div class="flex items-end h-full"> <h1>{{ service.title }}</h1> </div> </div> </div> {% endif %} <div class="overflow-x-hidden"> <div class="container"> <div class="row flex"> <div class="lg:col-6 p-0 relative flex justify-center items-center"> <div class="service-image img-full"> <div class="service-content lg:pr-32 py-24 lg:py-12 pl-[15px]"> {{ service.content|raw }} </div> <style scoped> .service-image:after { background-image:url('{{ imageCache('/' ~ service.fullImage2Path, 'zoomCrop', 1500, 675) }}'); } @media screen and (min-width: 767px) { .service-image:after { background-image:url('{{ imageCache('/' ~ service.fullImage2Path, 'zoomCrop', 3200, 1440) }}'); } } </style> </div> </div> <div class="lg:col-6 p-0 h-full"> <div class="bg-black black-full h-full text-white px-[15px] lg:px-10 py-12 lg:py-32 xl:py-48"> <div class="service-icon mb-6 lg:mb-0"> {{ service.iconClass|raw }} </div> <div class="service-content2 lg:ml-16 lg:pl-20 lg:py-16"> {{ service.content2|raw }} </div> </div> </div> </div> </div> </div> {# <ul> {% for item in allServices %} <li class="{{ item.id == service.id ? 'active' }}"> <a href="{{ generatePath( app.request, item.linkedPageId, {'service_slug' : item.slug } ) }}">{{ item.title }}</a> {% if item.activeChildren %} <ul> {% for child in item.activeChildren %} <li> <a href="{{ generatePath( app.request, child.linkedPageId, {'service_slug' : child.slug } ) }}">{{ child.title }}</a> </li> {% endfor %} </ul> {% endif %} </li> {% endfor %} </ul> #}</section>