all team-member elements in a color-section

custom class is in this case: team2

Günter Weber

Günter Weber

President & CEO

Günter Weber is President & CEO serving the critical role of guiding Abode Communities’ strategic vision and ensuring its’ work remains people-centered, advances equity, and creates measurable, lasting impact. He has been actively involved in affordable housing and community development for nearly three decades and is considered a formidable leader in affordable housing development, policy and legislation, and community investment.

Kerstin Weber

Kerstin Weber

President & CEO

Kerstin is President & CEO serving the critical role of guiding Abode Communities’ strategic vision and ensuring its’ work remains people-centered, advances equity, and creates measurable, lasting impact. She has been actively involved in affordable housing and community development for nearly three decades and is considered a formidable leader in affordable housing development, policy and legislation, and community investment.

Britta Weber

Britta Weber

President & CEO

Britta Weber is President & CEO serving the critical role of guiding Abode Communities’ strategic vision and ensuring its’ work remains people-centered, advances equity, and creates measurable, lasting impact.

function inline_popup_for_team_member_v2() { 
?>
<script type="text/javascript">
jQuery(document).ready(function($){
    
    // Warte bis Enfold seine Initialisierung abgeschlossen hat
    setTimeout(function() {
        // have a look if it works without that off click 
        // $('#team2 .avia-team-member').off('click');
        
        // Initialize magnificPopup with Gallery for all team members together
        $('#team2 .avia-team-member').magnificPopup({
            type: 'inline',
            midClick: true,
            mainClass: 'avia-popup team-member',
            closeOnContentClick: false,
            gallery: {
                enabled: true,
                arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%" aria-label="%title%"></button>',
                tPrev: 'Previous Biography',
                tNext: 'Next Biography',
                tCounter: '%curr% von %total%'
            },
            callbacks: {
                elementParse: function(item) {
                    // Create the pop-up content from the team member
                    var content = $('<div class="white-popup team"></div>');
                    
                    // Create wrapper for name and job title
                    var headerWrapper = $('<div class="team-member-header"></div>');
                    headerWrapper.append($(item.el).find('.team-member-name').clone());
                    headerWrapper.append($(item.el).find('.team-member-job-title').clone());
                    
                    content.append(headerWrapper);
                    content.append($(item.el).find('.team-img-container').clone());
                    content.append($(item.el).find('.team-member-description').clone());
                    
                    // only necessary if you like to close the lightbox on social media click
                    content.find('.team-img-container .team-social a').addClass('popup-modal-dismiss');
                    
                    item.src = content;
                },
                buildControls: function() {
                    // re-appends controls inside the main container
                    this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
                },
				close: function() {
					// Hide all Enfold tooltips when closing
					$('.avia-tooltip').css({display: 'none', opacity: '0'});
				}
            }
        });
    }, 500);
    
    // Handler for popup-modal-dismiss class
	$(document).on('click', '.popup-modal-dismiss', function (e) {  
		$.magnificPopup.close();
	});
});
</script>
<?php 
}
add_action('wp_footer', 'inline_popup_for_team_member_v2');
.team-member .mfp-content {
  max-width: 900px;
  background-color: #FFF;
  cursor: pointer;
}

#top .mfp-content .team-member-header { grid-area: feld1; }
#top .mfp-content .team-img-container { grid-area: feld2; }
#top .mfp-content .team-member-description { grid-area: feld3; align-self: end }

#top .mfp-content .team {
  display: grid;
  margin: 0;
  padding: 30px;
  gap: 10px;  
  grid-auto-flow: row;
  grid-template-columns: 2fr 1fr;   /*** 2 cells besides each other ( fr = fraction ) ***/
  grid-template-areas: "feld1 feld2" "feld3 feld2";
  align-items: start;
}

.mfp-arrow-left {
  left: -90px
}

.mfp-arrow-right {
  left: calc(100%);
}

.team-img-container .av-image-copyright {
  color: #FFF;
  opacity: 0.8;
}

.team .team-social-inner {
  top: calc(100% - 60px);
  opacity: 0;
  transition: opacity 1s ease;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-end;
}

.team .team-img-container:hover .team-social-inner {
  opacity: 1;
}


.team .team-social a {
  border-radius: 15px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(3px);
}

#main #team2 .team-member {
  cursor: pointer;
}

#main #team2 .team-member-description,
#main #team2 .team-social {
  display: none;
}