<div class="toolbox-element toolbox-container {{ additionalClassesData|join(' ') }}"> <div class="relative mx-auto px-4 sm:px-6 lg:px-8{% if not editmode %} max-w-md sm:max-w-3xl lg:max-w-7xl{% endif %}"> <div class="grid grid-cols-1 gap-3 sm:grid-cols-3"> {% for service in services %} {% if(loop.index is even) %}{% set color = "rs-red" %}{% else %}{% set color = "white" %}{% endif %} <div class="swiper-slide h-[41rem] relative border-8 mb-4 border-{{ color }}"> {% if service.teaserImg|length %} <img class="absolute top-0 left-0 w-full h-[40rem] object-cover" src="{{ service.teaserImg.getThumbnail('jumpstartImage') }}" /> {% endif %} <div class="relative flex flex-col p-7 w-full h-[40rem] bg-gradient-to-l from-[#66666650] to-[#000000]"> <h3 class="py-2 text-2xl tracking-tight text-{{ color }} sm:leading-none lg:mt-2 lg:text-3xl break-words"> <span class="md:block font-bold">{{ service.title|upper }}</span> <span class="md:block">{{ (service.tags|upper)|replace({"|":", "}) }}</span> </h3> <div class="relative grow"> <p class="text-lg text-white sm:text-m lg:text-m xl:text-l">{{ service.teaserDescription }}</p> </div> <a href="/dienstleistungen/{% if service.url|length %}{{ service.url }}{% else %}sid-{{ service.id }}{% endif %}"> <button class="robotics-button mb-8 mr-auto"> Mehr zu {{ service.title }} </button> </a> </div> </div> {% endfor %} </div> </div></div>