/* Team Section Fixes */
.team-section .container {
    max-width: 1320px; /* Increase max-width to accommodate cards */
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
}

.team-section .row {
    margin-left: -10px;
    margin-right: -10px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* Centralized member-image styles for 1:1 aspect ratio */
.team-section .member-image, .member-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    height: auto !important;
}

/* Large screens - 4 cards per row */
@media (min-width: 992px) {
    .team-section .col-lg-3 {
        width: calc(25% - 20px);
        flex: 0 0 calc(25% - 20px);
        max-width: calc(25% - 20px);
        margin: 0 10px;
    }
    
    .team-member {
        width: 100%;
    }
}

/* Reset Bootstrap container padding */
.team-section .container {
    padding-left: 30px;
    padding-right: 30px;
}

/* Medium screens - 2 cards per row */
@media (min-width: 768px) and (max-width: 991.98px) {
    .team-section .col-md-6 {
        width: calc(50% - 20px);
        flex: 0 0 calc(50% - 20px);
        max-width: calc(50% - 20px);
        margin: 0 10px;
    }
}

/* Small screens - 1 card per row */
@media (max-width: 767.98px) {
    .team-section .col-sm-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin: 0 0 20px 0;
    }

    .team-section .team-member {
        margin-bottom: 15px;
    }

    .team-section .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Remove Bootstrap gutter */
.team-section .row > * {
    padding-right: 0;
    padding-left: 0;
}

/* Ensure cards have proper spacing */
.team-member {
    margin-bottom: 20px;
}

/* Fix any potential overflow issues */
.team-section {
    overflow: hidden;
    width: 100%;
}

.team-section .row.justify-content-center {
    justify-content: flex-start !important;
}