<section class="sector-service-block"> {% if sector.image %} <div class="banner-block pb-6 lazyBackgroundImage" data-mobile="{{ imageCache('/' ~ sector.fullImagePath, 'zoomCrop', 900, 405) }}" data-desktop="{{ imageCache('/' ~ sector.fullImagePath, 'zoomCrop', 3200, 1440) }}"> <div class="container h-full"> <div class="flex items-end h-full"> <h1>{{ sector.title }}</h1> </div> </div> </div> {% endif %} <div class="container"> {% if sector.image2 %} <div class="row"> <div class="col-12 cms-area"> <picture> <source srcset="{{ imageCache('/' ~ sector.fullImage2Path, 'zoomcrop', 768, 400) }}" media="(max-width: 767px)"> <img class="max-w-full h-auto mt-12 mb-6 lg:my-12" src="{{ imageCache('/' ~ sector.fullImage2Path, 'zoomcrop', 1540, 500) }}" alt="{{ sector.title }}" loading="lazy"> </picture> </div> </div> {% endif %} <div class="row"> <div class="lg:col-8 cms-area"> {{ sector.content|raw }} </div> <div class="lg:col-4 mt-6 lg:mt-0 lg:mb-0"> {% if sector.parent %} <h3 class="lg:hidden sector-menu-link mb-0">Other {{ sector.parent.title }} Sectors</h2> {% else %} <h3 class="lg:hidden sector-menu-link mb-0">{{ sector.title }} Sectors</h2> {% endif %} <div class="flex lg:justify-end"> <ul class="sector-menu hidden lg:block mt-4 lg:mt-0"> {% for item in otherSectors %} {% if item.id != sector.id %} <li class="{{ item.id == sector.id ? 'active' }}"> <a href="{{ generatePath( app.request, item.linkedPageId, {'sector_slug' : item.slug } ) }}">{{ item.title }}</a> {% if item.activeChildren %} <ul> {% for child in item.activeChildren %} <li> <a href="{{ generatePath( app.request, child.linkedPageId, {'sector_slug' : child.slug } ) }}">{{ child.title }}</a> </li> {% endfor %} </ul> {% endif %} </li> {% endif %} {% endfor %} </ul> </div> </div> </div> </div> {% if sector.content2 %} <section class="parallax-divider mt-12"></section> <div class="container"> <div class="row"> <div class="col-12 cms-area"> {{ sector.content2|raw }} </div> </div> </div> {% endif %} {{ forceRenderHtmlBlock('Work For Us CTA')|raw }}</section>