/* Base styling for the teams container */
.teams {
    margin: 20px 0;
}

/* Grid container for team members */
.teams .team-members {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Force only child to span full width */
.teams .team-members li:only-child {
    grid-column: 1 / -1;
}

/* Desktop: Use fixed columns based on the --columns variable (default is 4) */
@media (min-width: 1025px) {
    .teams .team-members {
        grid-template-columns: repeat(var(--columns, 4), 1fr);
    }
}

/* Tablet: Force 3 columns */
@media (max-width: 1024px) and (min-width: 769px) {
    .teams .team-members {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile: Force 1 column */
@media (max-width: 768px) {
    .teams .team-members {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Basic styling for person cards */
.person-card {
    text-align: left;
}
.person-card h4 {
    margin-top: 0;
    font-size: 1.25rem;
    letter-spacing: normal;
}

.person-card p {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Styling for the person portrait */
.person-portrait img {
    max-width: 100%;
    height: auto;
    min-height: 250px;
    object-fit: cover;
}

/* LinkedIn icon styling */
.person-linkedin svg {
    vertical-align: middle;
    margin-right: 4px;
}