.team-member {
    overflow: hidden;
    border-radius: var(--unit-8);
}

.team-member__image-container {
    position: relative;
}

.team-member__image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-member__details {
    width: 100%;
}

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

@media (min-width: 64rem) {
    .team-members {
        --gap: var(--unit-40);
    }

    .team-member {
        position: relative;
        aspect-ratio: 1;
    }

    .team-member::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #1c1f2e;
        pointer-events: none;
        z-index: 0;
        transition: var(--transition);

        opacity: 0;
    }

    .team-member:hover::after {
        opacity: .7;
    }

    .team-member__image-container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .team-member__details {
        color: var(--color-white);
        position: absolute;
        left: 0;
        bottom: var(--unit-8);
        z-index: 1;
        text-align: center;
        transition: var(--transition);
        transform: translateY(calc(100% + var(--unit-8)));
    }

    .team-member:hover .team-member__details {
        transform: translateY(0);
    }

    .team-member__name {
        font-size: var(--font-24);
    }
}

@media (max-width: 63.9375rem) {
    .team-members {
        --gap: var(--unit-16);
    }

    .team-member {
        height: 100%;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .2);
        background-color: var(--color-white);
    }

    .team-member__image-container {
        aspect-ratio: 1;
    }

    .team-member__details {
        text-align: center;
        padding: var(--unit-8);
    }

    .team-member__description {
        color: var(--color-grey);
        margin-top: var(--unit-8);
        font-size: var(--unit-14);
    }
}