 <div id="positions" class="row new-row mobile-padding">
     <style>
     .headline {
         font-weight: 300;
         font-style: normal;
         color: #000;
     }

     .text-xl .headline {
         font-family: 'Georgia', Times New Roman, serif;
         font-weight: 500;
         font-size: 3.25rem;
         line-height: 3.75rem;
     }


     .up:last-child {
         margin-right: 0;
     }

     .three-up-circle {
         background-color: #f0f0f0;
         padding-left: 0;
         padding-right: 0;
     }

     .span-full-width,
     .is-full-width {
         width: 100%;
         max-width: 100vw;
         width: 100vw;
         margin-left: calc(-50vw + 50%);
     }

     .three-up-circle .profiles {
         padding-top: 40px;
         padding-bottom: 40px;
     }

     .three-up-circle .profiles,
     .three-up-circle .profile-filters {
         padding-left: 5%;
         padding-right: 5%;
     }

     .-u-text-center {
         text-align: center;
     }

     .-u-align-center {
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;
     }


     .three-up-circle .profiles .wrapper .inner-grid .three-up-circle-outer,
     .three-up-circle .profile-filters .wrapper .inner-grid .three-up-circle-outer {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
     }

     .three-up-circle .profile-card {
         width: 100%;
     }

     .three-up-circle .three-up-col.profile-card {
         width: 100%;
         max-width: 380px;
         color: #333;
     }

     .three-up-circle .three-up-col.profile-card:hover,
     .three-up-circle .three-up-col.profile-card:focus {
         z-index: 1;
     }

     .three-up-circle .three-up-col .profile-card-inner {
         background-color: #242021;
         margin: 3px 4px 0 0;
         padding: 40px 30px;
         position: relative;
         text-align: center;
         -webkit-transition: -webkit-box-shadow 0.4s ease-in-out;
         transition: -webkit-box-shadow 0.4s ease-in-out;
         transition: box-shadow 0.4s ease-in-out;
         transition: box-shadow 0.4s ease-in-out, -webkit-box-shadow 0.4s ease-in-out;
     }

     .three-up-circle .three-up-col.profile-card:hover .profile-card-inner {
         -webkit-box-shadow: 0 10px 50px 2px rgb(169 141 89 / 32%);
         box-shadow: 0 10px 50px 2px rgb(169 141 89 / 32%);
     }

     .three-up-circle .three-up-col.profile-card .profile-card__profile-pic--container {
         width: 100%;
     }

     .three-up-circle .profile-card__profile-pic {
         border-radius: 50%;
         margin-bottom: 23px;
     }

     .three-up-circle .three-up-col.profile-card img {
         width: 200px;
     }


     .text-m .headline {
         font-family: 'Georgia', Times New Roman, serif;
         font-weight: 500;
         font-size: 1.75rem;
         line-height: 2rem;
     }

     .up .headline {
         display: block;
     }

     .three-up-circle .profile-card--title {
         font-family: 'Georgia', Times New Roman, serif;
         margin-top: 0;
         margin-bottom: 10px;
         color: #a98d59 !important;
     }

     .three-up-circle .three-up-col.profile-card h6 {
         margin-top: 0;
     }

     .article-date,
     .eyebrow {
         display: block;
         padding-bottom: 3px;
         font-size: .875rem;
         line-height: 1.25rem;
     }

     .three-up-circle .profile-card-inner .profile-card--label,
     .three-up-circle .profile-card-inner .profile-card--value {
         font-size: .875rem;
         padding-bottom: 0;
     }

     .three-up-circle .three-up-col.profile-card h6 {
         margin-top: 0;
         text-transform: Capitalize;
         letter-spacing: 0em;
         color: #fff;
     }

     .three-up-circle .divider {
         display: block;
         height: 1px;
         width: 55px;
         overflow: hidden;
         background-color: #a98d59;
         margin: 16px auto;
     }

     .three-up-circle .profile-card--job-description {
         padding: 0 20px;
         margin-bottom: 14px;
         font-size: .875rem;
         /* height: 120px; */
         overflow: scroll;
     }

     .three-up-circle .profiles .wrapper .inner-grid {
         margin-bottom: 80px;
     }

     @media screen and (max-width: 47.9375em) {
         .text-xl .headline {
             font-family: 'Georgia', Times New Roman, serif;
             font-weight: 500;
             font-size: 2.25rem;
             line-height: 2.75rem;
         }
     }

     @media screen and (min-width: 48em) {
         .up {
             padding-left: 0;
             padding-right: 0;
         }

         .three-up-circle .profiles,
         .three-up-circle .profile-filters {
             padding-left: 0;
             padding-right: 0;
         }

         .three-up-circle .profiles {
             padding-top: 60px;
             padding-bottom: 60px;
         }

         .three-up-circle .profile-filters .wrapper .inner-grid,
         .three-up-circle .profiles .wrapper .inner-grid {
             float: left;
             display: block;
             margin-right: 3.07692%;
             width: 85.27473%;
             margin-left: 7.36264%;
         }

         .three-up-circle .profile-filters .wrapper .inner-grid:last-child,
         .three-up-circle .profiles .wrapper .inner-grid:last-child {
             margin-right: 0;
         }

         .three-up-circle .three-up-col.profile-card {
             width: 50%;
             max-width: none;
             margin: 0;
         }

         .three-up-circle .three-up-col .profile-card-inner {
             height: 330px;
         }

         .three-up-circle .three-up-col .profile-card-inner.has-image {
             height: 520px;
         }
         .three-up-circle .three-up-col .profile-card-inner.has-image {
             height: 380px;
        }

         .three-up-circle .three-up-col.profile-card .profile-card-inner {
             margin-bottom: 2px;
         }

     }

     @media screen and (min-width: 73.75em) {
         .three-up-circle .three-up-col.profile-card {
             width: 33.33%;
         }

     }

     @media screen and (min-width: 73.75em) and (max-width: 86.25em) {

         .three-up-circle .profile-card-inner .profile-card--value,
         .three-up-circle .profile-card-inner .profile-card--label {
             font-size: .8125rem;
         }
     }
     </style>
     <div class="wrapper header-block">
         <div class="c-area -display-grid">
             <h2 class="section-header text-center">
                 Our leadership
             </h2>
         </div>
         <section class="up three-up-circle span-full-width">
             <div class="profiles">
                 <div class="wrapper">
                     <div class="inner-grid">
                         <div class="three-up-circle-outer -u-align-center -u-text-center">
                         <?php 
                         $positions = array(
                            array(
                                'person_name' => 'George Babila Nfon',
                                'avatar' => '/wp-content/uploads/2021/05/George-Babila-Nfon.jpg',
                                'role' => 'Group CEO & Head of Business Intelligence',
                                'permalink' => '/leaders/george-babila-nfon/'
                            ),
                            array(
                                'person_name' => '',
                                'avatar' => '/wp-content/uploads/2021/06/no-image-male-e1624285418715.jpg',
                                'role' => 'Chief of Operations',
                                'permalink' => 'permalink'
                            ),
                            array(
                                'person_name' => '',
                                'avatar' => '/wp-content/uploads/2021/06/no-image-male-e1624285418715.jpg',
                                'role' => 'Business Development Officer',
                                'permalink' => 'permalink'
                            ),
                            array(
                                'person_name' => '',
                                'avatar' => '/wp-content/uploads/2021/06/no-image-male-e1624285418715.jpg',
                                'role' => 'Process Officer',
                                'permalink' => 'permalink'
                            ),
                            array(
                                'person_name' => '',
                                'avatar' => '/wp-content/uploads/2021/06/no-image-male-e1624285418715.jpg',
                                'role' => 'Head of Legal Issue',
                                'permalink' => 'permalink'
                             
                            ),
                            array(
                                'person_name' => '',
                                'avatar' => '/wp-content/uploads/2021/06/no-image-male-e1624285418715.jpg',
                                'role' => 'Administrative Officier',
                                'permalink' => 'permalink'
                            ),
                            array(
                                'person_name' => '',
                                'avatar' => '/wp-content/uploads/2021/06/no-image-male-e1624285418715.jpg',
                                'role' => 'Head of Marketing & Social Media',
                                'permalink' => 'permalink'
                            ),
                            array(
                                'person_name' => '',
                                'avatar' => '/wp-content/uploads/2021/06/no-image-male-e1624285418715.jpg',
                                'role' => 'HR Officer',
                                'permalink' => 'permalink'
                            ),
                            array(
                                'person_name' => '',
                                'avatar' => '/wp-content/uploads/2021/06/no-image-male-e1624285418715.jpg',
                                'role' => 'Consulting Architect',
                                'permalink' => 'permalink'
                            ),
                            array(
                                'person_name' => '',
                                'avatar' => '/wp-content/uploads/2021/06/no-image-male-e1624285418715.jpg',
                                'role' => 'Head of Finance',
                                'permalink' => 'permalink'
                            )
                         )
                         
                         ?>
                        <?php foreach ($positions as $position):?>
                            <a class="profile-card three-up-col " href="<?php  echo site_url($position['permalink']) ?>">
                                <div class="profile-card-inner has-image">
                                    <div class="profile-card__profile-pic--container">
                                        <img class="profile-card__profile-pic"
                                            src="<?php  echo site_url($position['avatar']) ?>"
                                             alt="<?php echo $position['person_name'] ?>">
                                    </div>
                                    <div class="profile-card__details-text text-m">
                                        <hgroup class="profile-card-headings">
                                            <h6 class="headline profile-card--title"><?php echo $position['person_name'] ?></h6>
                                            <h6 class="eyebrow profile-card--value"><?php echo $position['role'] ?></h6>
                                        </hgroup>
                                        <div class="divider"></div>
                                        <div class="profile-card--value profile-card--job-description"><?php the_field('role_description'); ?></div>
                                        <div class="description"><?php //the_field('order_no'); ?> </div>
                                    </div>
                                </div>
                            </a>
                        <?php endforeach ?>
                         </div>
                     </div>
                 </div>
             </div>
         </section>
     </div>
 </div>