.team-members {
    h2 {
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 3px;
        margin-bottom: var(--spacing-lg);

        @media screen and (max-width: 576px) {
            font-size: 2.4rem;
            letter-spacing: 2px;
            margin-bottom: var(--spacing-md);
        }
    }
    .team-members-grid {
        .team-member {
            .team-member-wrapper {
                position: relative;
                display: block;
                border-radius: 30px;
                overflow: hidden;

                &:hover, &:focus-visible {
                    .team-member-info {
                        opacity: 1;
                        visibility: visible;
                    }
                    .team-member-image {
                        img {
                            transform: scale(1.1);
                        }
                    }
                }
            }
            .team-member-image {
                border-radius: 30px;
                overflow: hidden;

                img {
                    width: 100%;
                    display: block;
                    transition: 1s ease;
                }
            }
            .team-member-info {
                position: absolute;
                width: 100%;
                height: 100%;
                bottom: 0;
                left: 0;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 40%, #000 75%);
                padding: 25px;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                align-items: flex-start;
                opacity: 0;
                visibility: hidden;
                transition: .7s ease;

                .team-member-name {
                    position: relative;
                    display: inline;
                    font-size: 1.6rem;
                    font-weight: 800;
                    line-height: 1.2;
                    text-transform: uppercase;
                    letter-spacing: 1.28px;
                    color: var(--color-white);
                    text-shadow: 0px 0px 10px rgba(var(--color-black-rgb), 0.7);
                    padding-right: 25px;
                    margin-bottom: 7px;

                    &:after {
                        content: '';
                        position: absolute;
                        width: 15px;
                        height: 13px;
                        background-image: url('../../../assets/svg/arrow-right-green-alt.svg');
                        background-size: cover;
                        background-repeat: no-repeat;
                        top: 50%;
                        right: 0;
                        transform: translateY(-50%);
                    }
                }
                .team-member-role {
                    line-height: 1.3;
                    color: #B4B4B4;
                    text-shadow: 0px 0px 10px rgba(var(--color-black-rgb), 0.7);
                    margin-bottom: 0;
                }
            }
        }
    }
}