doormile-site/web/our-team.php

<?php
/**
 * Modular Team Section Component
 * Usage: include 'our-team.php';
 * Depends on: head.php being included in the parent page for global styles.
 */
?>
<style>
    /* Scope safety: ensured by wrapping elementor-63 container below */
    .elementor-element-bf5fff2 {
        --margin-top: 100px !important; /* Slightly reduced for about page */
        --margin-bottom: 80px !important;
    }
    .elementor-element-57c7653 .logico-title {
        font-size: 50px !important; /* Adjusted for better visibility */
        line-height: 1.2 !important;
        margin-bottom: 40px !important;
    }
    /* Fix for overlapping text seen in screenshot */
    .elementor-element-bf5fff2 {
        clear: both;
        position: relative;
        z-index: 0;
        background: transparent;
    }
</style>

<div class="elementor elementor-63">
    <div class="elementor-element elementor-element-bf5fff2 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="bf5fff2" data-element_type="container">
        <div class="e-con-inner">
            <div class="elementor-element elementor-element-5a54148 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5a54148" data-element_type="container">
                <div class="elementor-element elementor-element-94ebf2e elementor-widget elementor-widget-logico_heading" data-id="94ebf2e" data-element_type="widget" data-widget_type="logico_heading.default">
                    <div class="elementor-widget-container">
                        <div class="logico-title">/ team /</div>
                    </div>
                </div>
                <div class="elementor-element elementor-element-57c7653 elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-logico_heading" data-id="57c7653" data-element_type="widget" data-settings="{&quot;_animation&quot;:&quot;logico_heading_animation&quot;}" data-widget_type="logico_heading.default">
                    <div class="elementor-widget-container">
                        <h3 class="logico-title">Meet our the&nbsp;best crew</h3>
                    </div>
                </div>
                <div class="elementor-element elementor-element-138c81a elementor-widget elementor-widget-logico_team_listing" data-id="138c81a" data-element_type="widget" data-widget_type="logico_team_listing.default">
                    <div class="elementor-widget-container">
                        <div class="logico-team-listing-widget">
                            <div class="archive-listing" data-ajax='{&quot;post_type&quot;:&quot;team&quot;,&quot;post_status&quot;:&quot;publish&quot;,&quot;ignore_sticky_posts&quot;:true,&quot;suppress_filters&quot;:true,&quot;orderby&quot;:&quot;post__in&quot;,&quot;order&quot;:&quot;desc&quot;,&quot;link_base&quot;:&quot;https:\/\/demo.artureanec.com\/themes\/logico-rounded\/home-3&quot;,&quot;post__in&quot;:[&quot;2807&quot;,&quot;2850&quot;,&quot;2855&quot;],&quot;posts_per_page&quot;:3,&quot;columns_number&quot;:3,&quot;paged&quot;:1}' data-widget='{&quot;item_class&quot;:&quot;team-item-wrapper&quot;,&quot;columns_number&quot;:3,&quot;listing_type&quot;:&quot;grid&quot;,&quot;show_media&quot;:&quot;yes&quot;,&quot;show_title&quot;:&quot;yes&quot;,&quot;show_position&quot;:&quot;yes&quot;,&quot;show_socials&quot;:&quot;yes&quot;,&quot;show_pagination&quot;:&quot;&quot;}'>
                                <div class="archive-listing-wrapper team-listing-wrapper team-grid-listing columns-3">
                                    <div class="team-item-wrapper post-2807 team type-team status-publish has-post-thumbnail hentry">
                                        <div class="team-item">
                                            <div class="team-item-media">
                                                <div class="post-media">
                                                    <a href="#">
                                                        <picture>
                                                            <source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-480x480.jpg 480w">
                                                            <source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-480x480.jpg 660w">
                                                            <source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-480x480.jpg 840w">
                                                            <img decoding="async" alt="team-pic-1" title="team-pic-1" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-680x680.jpg" class="attachment-medium size-medium wp-post-image"/>
                                                        </picture>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="team-item-content">
                                                <div class="post-title">
                                                    <a href="#">Samuel Peterson</a>
                                                </div>
                                                <div class="team-item-position">CEO Logico</div>
                                                <div class="team-item-socials">
                                                    <ul class="team-socials wrapper-socials">
                                                        <li><a href="https://www.facebook.com/" target="_blank" class="fab fa-facebook-f" title="Facebook"></a></li>
                                                        <li><a href="https://x.com/" target="_blank" class="fab fa-x-twitter" title="X"></a></li>
                                                        <li><a href="https://www.linkedin.com/" target="_blank" class="fab fa-linkedin-in" title="LinkedIn"></a></li>
                                                        <li><a href="https://www.youtube.com/" target="_blank" class="fab fa-youtube" title="YouTube"></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="team-item-wrapper post-2850 team type-team status-publish has-post-thumbnail hentry">
                                        <div class="team-item">
                                            <div class="team-item-media">
                                                <div class="post-media">
                                                    <a href="#">
                                                        <picture>
                                                            <source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 480w">
                                                            <source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 660w">
                                                            <source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 840w">
                                                            <img decoding="async" alt="team-pic-2" title="team-pic-2" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-680x680.jpg" class="attachment-medium size-medium wp-post-image"/>
                                                        </picture>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="team-item-content">
                                                <div class="post-title">
                                                    <a href="#">Andrew McDickens</a>
                                                </div>
                                                <div class="team-item-position">Manager</div>
                                                <div class="team-item-socials">
                                                    <ul class="team-socials wrapper-socials">
                                                        <li><a href="https://www.facebook.com/" target="_blank" class="fab fa-facebook-f" title="Facebook"></a></li>
                                                        <li><a href="https://x.com/" target="_blank" class="fab fa-x-twitter" title="X"></a></li>
                                                        <li><a href="https://www.linkedin.com/" target="_blank" class="fab fa-linkedin-in" title="LinkedIn"></a></li>
                                                        <li><a href="https://www.youtube.com/" target="_blank" class="fab fa-youtube" title="YouTube"></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="team-item-wrapper post-2855 team type-team status-publish has-post-thumbnail hentry">
                                        <div class="team-item">
                                            <div class="team-item-media">
                                                <div class="post-media">
                                                    <a href="#">
                                                        <picture>
                                                            <source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 480w">
                                                            <source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 660w">
                                                            <source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 840w">
                                                            <img decoding="async" alt="team-pic-3" title="team-pic-3" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3.jpg" class="attachment-medium size-medium wp-post-image"/>
                                                        </picture>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="team-item-content">
                                                <div class="post-title">
                                                    <a href="#">Samantha Powers</a>
                                                </div>
                                                <div class="team-item-position">HR Specialist</div>
                                                <div class="team-item-socials">
                                                    <ul class="team-socials wrapper-socials">
                                                        <li><a href="https://www.facebook.com/" target="_blank" class="fab fa-facebook-f" title="Facebook"></a></li>
                                                        <li><a href="https://x.com/" target="_blank" class="fab fa-x-twitter" title="X"></a></li>
                                                        <li><a href="https://www.linkedin.com/" target="_blank" class="fab fa-linkedin-in" title="LinkedIn"></a></li>
                                                        <li><a href="https://www.youtube.com/" target="_blank" class="fab fa-youtube" title="YouTube"></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>