.team__wrapper {
    --swiper-scrollbar-drag-bg-color: rgb(var(--color-accent));
    --swiper-scrollbar-border-radius: 0;
    --swiper-scrollbar-size: 4px;
    /* --swiper-scrollbar-sides-offset: 0; */
    --swiper-scrollbar-top: auto;
    --swiper-scrollbar-bottom: 4px;
}

.team__header {
    margin-bottom: 32px;
}

.team__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 16px;
}

.team__grid > * {
    flex: 0 0 calc(50% - 8px);
}


.team__grid .card-wrapper {
    padding: 0;
}

@media screen and (min-width: 750px) {
    .team__grid {
        gap: 32px 24px
    }

    .team__grid > * {
        flex: 0 0 calc(33% - 24px);
    }    
}

@media screen and (min-width: 1024px) {
    .team__grid {
        gap: 42px 32px;
    }

    .team__grid > * {
        flex: 0 0 calc(25% - 24px);
    }    
}

.team__grid .grid-item .media {
    border: 8px solid white;
}

.team__grid {
    text-align: left;
}


@media screen and (max-width: 749px) {
    .team__grid .card__heading {
        font-size: 18px;
    }

    .team__grid p {
        font-size: 14px;
    }


    .team__filters {
        display: none !important;
    }
}


.team-filter-mobile {
    font-family: var(--font-body-family);
    font-weight: var(--type-medium);
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.team-filter-mobile label {
    color: rgb(var(--color-medium-green));
    white-space: nowrap;
}

#team-filter {
    font-family: var(--font-body-family);
    font-weight: var(--type-medium);
    font-size: 18px;
    color: rgba(var(--color-foreground), 1);
    background-color: transparent;
    border: none;
    padding-right: 36px;
    max-width: 240px;
}

@media screen and (min-width: 750px) {
    .team__grid {
        justify-content: center;
        text-align: center;
    }

    .team__grid .grid-item .media {
        border: 12px solid white;
    }
    
    .team__filters {
        display: block;
    }
    
    .team-filter-mobile {
        display: none;
    }

}

/* filters */
.team__filters a {
    font-weight: var(--type-medium);
    text-decoration: none;
    color: rgba(var(--color-foreground), 0.6);
}

.team__filters a.selected {
    color: rgba(var(--color-foreground), 1);
}

.team__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: 1028px;
    margin: 0 auto 56px auto;
}