/* Block: Team Member */

.block-team-member {
    isolation: isolate;
    overflow: hidden;
}

.block-team-member .content-wrapper {
    position: relative;
    display: flex;
    gap: 6.6875rem;
}

.block-team-member .content-wrapper .left-side {
    flex-basis: 27%;
    flex-shrink: 0;
}

.block-team-member .content-wrapper .right-side {
    position: relative;
    flex: 1;
}

.block-team-member .design-curve {
    width: var(--size, 100%);
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transform: translate(-70%, -58%);
}

.block-team-member .design-curve::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 11rem;
    border-radius: 50%;
    background: linear-gradient(8deg, var(--c-gradient-secondary));
    mask:
        linear-gradient(#000 0 0) exclude,
        linear-gradient(#000 0 0) content-box;
    z-index: -1;
} 

.block-team-member .lined-circle {
    position: absolute;
    top: -2rem;
    left: -2rem;
    width: 10.625rem;
    height: auto;
    transform: rotate(90deg);
    z-index: -1;
}

.block-team-member.bg-gradient .lined-circle {
    opacity: .3;
}

.block-team-member .team-member--image {
    display: block;
    aspect-ratio: 320 / 380;
    width: 100%;
    height: auto;
    object-fit: cover;
    border: 6px solid white;
    border-radius: var(--radius-l);
    box-shadow: 0px 0px 50px 0px #08172C14;
    background-color: var(--c-aqua-haze);
}

.block-team-member .team-member--meta {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin-bottom: 2.15rem;
}

.block-team-member .team-member--position {
    padding-left: 0.875rem;
    border-left: 2px solid rgb(from var(--c-tertiary) r g b / .3);
}


@media screen and (width<=640px) {
    .block-team-member .content-wrapper {
        flex-direction: column;
        gap: 2.5rem;
    }

    .block-team-member .team-member--image {
        max-width: 49vw;
    }

    .block-team-member .design-curve {
        width: calc(0.5 * var(--size, 100%));
        transform: translate(-49%, -62%);
    }

    .block-team-member .design-curve::after {
        padding: 5.5rem;
    }

    .block-team-member .team-member--position {
        border-left: none;
        padding-left: 0;
        position: relative;
    }

    .block-team-member .team-member--position::before {
        content: "";
        display: block;
        height: 2px;
        width: 20px;
        background-color: rgb(from var(--c-tertiary) r g b / .3);
        margin-bottom: 0.5rem;
    }

    .block-team-member .team-member--meta {
        margin-bottom: 2.5rem;
        gap: 0.5rem;
        flex-direction: column;
        align-items: flex-start;
    }
}