.team-grid {
    & .team-grid__grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 40px;
        justify-content: center;
        max-width: 1156px;
        margin: 0 auto;
    }

    & .team-member {
        width: 264px;
    }

    & .team-member__name {
        color: #343A40;
        font-family: Roboto;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.12px;
        text-decoration: none;
        margin: 0;

        & a {
            text-decoration: none;
            color: inherit;
            font-weight: inherit;
        }
    }

    & .team-member__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: 24px;
        gap: 16px;
    }

    & a.team-member__linkedin {
        height: 24px;
        width: 24px;
        color: #00A398;
        transition: color 0.2s ease-in-out;

        & svg {
            margin-top: 3px;
        }

        &:hover, &:focus-visible {
            color: #00827A;
        }
    }

    & .team-member__title {
        color: #77797E;
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.08px;
        margin-top: 4px;

        & a {
            text-decoration: none;
            color: inherit;
            font-weight: inherit;
        }
    }

    & .team-member__photo {
        aspect-ratio: 264 / 287;
        display: flex;
        align-items: flex-end;
        background-image: url("/wp-content/themes/assent-wp/assets/images/bio-gradient-2.webp");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom;
        position: relative;

        & a {
            height: 100%;
            width: 100%;
            display: flex;
            align-items: flex-end;
        }

        & img {
            transition: transform 0.3s ease-in-out;
        }

        & a:hover img, 
        & a:focus-visible img {
            transform: translateY(1px);
        }

        & .team-member__triangles { 
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("/wp-content/themes/assent-wp/assets/images/bio-gradient-hover.webp");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: bottom;
            transition: opacity 0.3s ease-in-out;
        }

        & a:hover .team-member__triangles, 
        & a:focus-visible .team-member__triangles {
            opacity: 1;
        }
    }
}

@media (max-width: 653px) {
    .team-grid {
        & .team-grid__grid {
            gap: 32px;
        }
    }
}