.team-member {
    font-family: 'Secondary';
    text-align: center;
    border-radius: var(--border-radius-medium);
}

.team-member__details {
    padding: var(--unit-16) 0;
}

.team-member__name {
    font-size: var(--font-20);
    font-weight: var(--font-bold);
}

.team-member__position {
    font-size: var(--font-16);
    font-weight: var(--font-medium);
}

/*LARGE ONLY*/
@media (min-width: 64rem) {
    .team-member__details,
    .team-member
    {
        transition: var(--transition);
    }

    .team-member {
        position: relative;
    }

    .team-member__details {
        position: absolute;
        z-index: 1;
        width: 100%;
        background-color: var(--color-white);
        opacity: 0;
    }

    .team-member:hover {
        box-shadow: var(--box-shadow);
        transform: translateY(-20%);
    }

    .team-member:hover .team-member__details {
        opacity: 1;
        box-shadow: var(--box-shadow);
        border-bottom-left-radius: var(--border-radius-medium);
        border-bottom-right-radius: var(--border-radius-medium);
    }
}