.teamimage {
    background-size: contain;
    background-position: bottom left;
    background-repeat: no-repeat;
    position: relative;
    z-index: 3;
    -webkit-mask-image: linear-gradient(to bottom, var(--bgcolor) 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, var(--bgcolor) 90%, transparent 100%);
    width: 100%;
    aspect-ratio: 1;
}

.teamitem {
    width: 100%;
    max-height: 100svh;
}

.teamitem .teamleft {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1;
    max-height: 100%;
}

.teamitem .teamright {
    width: 86%;
    max-width: 86%;
    margin-left: 14%;}
.teamitem .teamright .align-self-center {
    padding: var(--padding);

}

@media (max-width: 991px) {
    .teamitem {
        margin-bottom: 10svh;
        margin-left: 0;
    }

    .teamitem h3 {
        hyphens: auto;
        hyphenate-character: '';
    }

    .teamitem .teamleft {
        margin-bottom: -25%;
    }

    .teamitem .teamright {
        height: auto;
    }
}

@media (max-width: 767px) {
    .teamitem .teamright {
        margin-left: 0;
    }
}
.teamitem .teamright >.row  { position: relative}
.teamitem .teamright >.row:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: var(--bgcolor-43); */
    transform: translate(-35%, 15%);
    z-index: -1;
    border-radius: 50%;
    /* aspect-ratio: 1; */
    background: radial-gradient(circle, var(--bgcolor-65) 0%, transparent 70%);

}

@media (min-width: 992px) {
    .teamitem {
        min-width: 100svw
    }

    .teamimage {
        height: 100svH;
    }

    .teamitem .teamleft {
        width: 86%;
        max-width: 86%;
        max-height: 100%;
    }

    .teamitem .teamright {
        width: 76%;
        max-width: 76%;
        margin-left: -62%;
        /* align-content: end; */

    }
}

@media (min-width: 1400px) {
    #team {
        height: 100vH;
        width: fit-content;
        display: flex;
        flex-wrap: nowrap;
        padding: 0;
    }

    .teamitem .teamright {
        width: 50%;
        max-width: 50%;
        margin-left: -10%;
    }

    .teamitem .teamleft {
        width: 60%;
        max-width: 60%;
        aspect-ratio: 1;
        max-height: 100%;
    }


    @media (orientation: landscape) {
        .teamitem .container {
            width: 100vW;
            max-width: 1920px;
        }
    }

    .teamimage {
        background-position: bottom right;
        height: 100vH;
        width: auto;
        aspect-ratio: unset;
    }

}


.teamslideshow {
    box-shadow: var(--mainshadow);
    aspect-ratio: 16/9;
    background: var(--gridcolor-14);
    width: 86%;
    max-width: 50vW;
    position: absolute;
    left: 43%;
    top: 25%;
    z-index: 1;
    overflow: hidden;
    display: none
}

@media (orientation: portrait) {
    .teamslideshow {
        max-width: 86vW;
        left: 33%;
    }

    @media (max-width: 767px) {
        .teamslideshow {
            left: 15%;
        }
    }
}

.teamslidesh
.teamitem:hover .teamslideshow, .teamitem:has(*:hover) .teamslideshow {
    display: block;
}

@media (pointer: coarse) {
    .teamitem .teamslideshow {
        display: block
    }
}

@media (hover: none) {
    .teamitem .teamslideshow {
        display: block
    }
}

.teamleft, .teamright {
    position: relative;
    flex: 0 0 auto;
}

.teamright {
    z-index: 3;
    text-shadow: var(--textshadow);
    padding-bottom: var(--padding);
    width: 40%;
    margin-left: -20%;
}

.teamitem .teamslideshow .carousel {
    position: absolute;
    inset: 0;
    overflow: hidden
}

.teamitem .carousel-item {
    transition: .001s !important
}

.teamitem .carousel-item {
    background-size: cover;
    background-position: center center;
}

.teamitem .carousel .carousel-inner,
.teamitem .carousel .carousel-inner .carousel-item {
    width: 100%;
    height: 100%;
}