/*
 * Styles for MQE SRV Pod Templates plugin
 */

.flex-container.members {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px !important;
}

.flex-container.members .card {
    /* Calculate width for 4 columns with 20px gap */
    flex: 0 0 calc((100% - 60px) / 4);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Ensure consistent height, adjust as needed */
    height: 100%;
    /* Add any other styling to ensure consistent appearance */
}

h2.group-title {
    margin-top: 40px;
    font-size: 1.75em;
    text-align: center;
}

/* Adjust for smaller screens if necessary */
@media (max-width: 1200px) {
    .flex-container.members .card {
        /* 3 columns */
        flex: 0 0 calc((100% - 40px) / 3);
    }
}

@media (max-width: 900px) {
    .flex-container.members .card {
        /* 2 columns */
        flex: 0 0 calc((100% - 20px) / 2);
    }
}

@media (max-width: 600px) {
    .flex-container.members .card {
        /* 1 column */
        flex: 0 0 100%;
    }
}


.flex-container.members .card .card-thumbnail {
    /* Ensure consistent thumbnail size if needed */
    height: 200px;
    /* Example fixed height */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-container.members .card .card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensure image covers the area without distortion */
}

.flex-container.members .card .card-info {
    flex-grow: 1;
    /* Allow info section to take available space */
    display: flex;
    flex-direction: column;
}

.flex-container.members .card h3 {
    margin-top: 0;
}

.flex-container.members .card .contact-details {
    margin-top: auto;
    /* Push contact details to the bottom */
}