.team-member-card-container {
    display: inline-block; /* Allows the container to shrink to fit content */
    text-align: left; /* Left-aligns text */
    width: 100%;
    max-width: 400px; /* Matches the max width of the card */
}

.team-member-card {
    width: 100%;
    position: relative;
    overflow: hidden; /* Hides any overflow */
    background-color: var(--e-global-color-cd51554); /* Default transition background */
    border-radius: 8px; /* Optional: Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow for depth */
    transition: transform 0.2s ease; /* Optional: Add a hover effect */
}

.team-member-card::before {
    content: '';
    display: block;
    padding-bottom: 100%; /* Enforces a 1:1 aspect ratio */
}

.team-member-card__flip-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.team-member-card__front-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover; /* Ensures the initial photo covers the entire container */
    transition: opacity 0.2s ease-in-out; /* Slightly slower transition effect */
    opacity: 1; /* Show the initial photo */
    z-index: 1; /* Make sure the initial photo is above the gallery images */
}

.team-member-card__back-gallery {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; /* Stack images vertically */
    justify-content: center;
    align-items: center;
}

.team-member-card__back-gallery > div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* Hide all images by default */
    transition: opacity 0.2s ease-in-out, background-color 0.4s ease-in-out; /* Include background transition */
    object-fit: cover; /* Stretches the image to fill the container while keeping aspect ratio */
    /* background-color dynamically set inline in the PHP render method based on Elementor selection */
    z-index: 0; /* Place gallery images below the initial photo */
}

.team-member-card__back-gallery > div.active {
    opacity: 1; /* Show the active image */
}

.team-member-card__back-bio {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    font-size: 40px; /* Adjust font size as needed */
    text-align: left; /* Left-align text */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    /* Background and text colors are set dynamically via inline styles in PHP */
}w

.team-member-card__body {
    padding: 10px 0; /* Adds padding between the card and the text */
    text-align: left; /* Left-align text */
    width: 100%;
    margin: 0 auto; /* Center text container */
    background-color: transparent; /* Remove any background color */
}

.team-member-card__body-name {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
    text-align: left; /* Left-align name */
}

.team-member-card__body-position {
    font-size: 14px;
    color: #555;
    text-align: left; /* Left-align position */
}