.team-bio-hero {
    & .team-bio-hero__wrapper {   
        background-size: cover;
        -webkit-clip-path: ellipse(85% 80% at 50% 20%);
        clip-path: ellipse(85% 80% at 50% 20%);
        background-position: center center;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        width: 100%;
        background-image: url("/wp-content/themes/assent-wp/assets/images/bio-gradient.webp");
        min-height: 368px;
    }

    & .breadcrumbs {
        align-self: flex-start;
        justify-self: flex-start;
        margin-bottom: 0;
        padding-top: 31px;

        & ul {
            display: flex;
            align-items: center;
            gap: 0;
        }

        & ul li:first-child {
            display: none;
        }

        & ul li,
        & ul li a,
        & ul li a:hover,
        & ul li a:focus,
        & ul li a:active {
            color: rgba(0, 163, 152, 1);
            font-family: Roboto;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: -0.16px;
        }

        & ul li a:focus-visible {
            outline-offset: .19rem;
            outline: 1px dashed;
        }

        & ul li:not(:last-child)::after {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Cpath d='M5.47082 12.9701C5.32992 13.1109 5.25076 13.302 5.25076 13.5013C5.25076 13.7006 5.32992 13.8917 5.47082 14.0326C5.61171 14.1734 5.80281 14.2526 6.00207 14.2526C6.20132 14.2526 6.39242 14.1734 6.53332 14.0326L11.5333 9.03255C11.6032 8.96287 11.6587 8.88008 11.6966 8.78892C11.7344 8.69775 11.7539 8.60001 11.7539 8.5013C11.7539 8.40259 11.7344 8.30485 11.6966 8.21369C11.6587 8.12252 11.6032 8.03973 11.5333 7.97005L6.53332 2.97005C6.39242 2.82915 6.20132 2.75 6.00207 2.75C5.80281 2.75 5.61171 2.82915 5.47082 2.97005C5.32992 3.11095 5.25076 3.30204 5.25076 3.5013C5.25076 3.70056 5.32992 3.89165 5.47082 4.03255L9.93894 8.50068L5.47082 12.9701Z' fill='%2300A398' fill-opacity='1'/%3E%3C/svg%3E");
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-left: 7px;
            margin-right: 7px;
            transform: translateY(-2px);
        }
    }

    & .container {
        max-width: 64.38rem;
        margin-right: auto;
        padding-left: 3.13rem !important;
        padding-right: 3.13rem !important;
        display: flex;
        justify-content: space-between;
        height: 100%;
    }

    & .team-bio-hero__header {
        display: flex;
        gap: 18px;
        align-items: center;
    }

    & .team-bio-hero__left {
        display: flex;
        flex-direction: column;
        margin-bottom: 74px;

        svg {
            width: 28px;
            height: 28px;
        }

        & .team-bio-hero__name {
            color: #343A40;
            font-family: Roboto;
            font-size: 40px;
            font-style: normal;
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: -0.2px;
            margin-bottom: 8px;
        }

        & .team-bio-hero__title {
            font-family: Roboto;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.5;
        }

        & a.team-bio-hero__linkedin {
            color: #00A398;
            transition: color 0.2s ease-in-out;

            &:hover, &:focus-visible {
                color: #00827A;
            }
        }
    }

    & .team-bio-hero__content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    & img {
        width: 334px;
        height: 374px;
        object-fit: contain;
        object-position: bottom;
        margin-right: 20px;
    }

    ~ .wysiwyg-section a:first-child:last-child {
        color: var(--linkColor) !important;
        text-decoration: none !important;
        display: inline-block;
        padding-top: 12px;

        &::after {
            content: '';
            display: inline-block;
            vertical-align: middle;
            width: 20px;
            height: 10px;
            background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='heroicons-mini/arrow-up-right'%3E%3Cpath id='Vector (Stroke)' fill-rule='evenodd' clip-rule='evenodd' d='M5.21967 14.7803C5.51256 15.0732 5.98744 15.0732 6.28033 14.7803L13.5 7.56066V13.25C13.5 13.6642 13.8358 14 14.25 14C14.6642 14 15 13.6642 15 13.25V5.75C15 5.33579 14.6642 5 14.25 5H6.75C6.33579 5 6 5.33579 6 5.75C6 6.16421 6.33579 6.5 6.75 6.5H12.4393L5.21967 13.7197C4.92678 14.0126 4.92678 14.4874 5.21967 14.7803Z' fill='%234D758F'/%3E%3C/g%3E%3C/svg%3E");
            background-size: cover;
            transform: translate(0, 0);
            transition: transform linear 0.25s;
            margin-left: 4px;
            background-position: 50%;
            font-size: 18px;
            color: inherit;
            text-align: left;
            font-weight: 600;
            line-height: 150%;
            letter-spacing: 0.045px;
            text-wrap: balance;
        }

        &:hover::after,
        &:focus::after {
            transform: translate(2px, -2px);
        }
    }
}

@media (max-width: 1599px) {
    .team-bio-hero {
        & .container {
            max-width: 53.75rem;
        }
    }
}

@media (max-width: 991px) {
    .team-bio-hero {
        & .container {
            padding-left: 2.19rem !important;
            padding-right: 2.19rem !important;
        }
    }
}

@media (max-width: 767px) {
    .team-bio-hero {
        & .team-bio-hero__wrapper {
            background-image: url("/wp-content/themes/assent-wp/assets/images/bio-gradient-3.webp");
            -webkit-clip-path: ellipse(100% 65% at 50% 35%);
            clip-path: ellipse(100% 65% at 50% 35%);
        }

        img {
            width: 100%;
            height: auto;
            max-width: 311px;
        }

        & .container {
            flex-direction: column;
            align-items: center;
        }

        & .team-bio-hero__left {
            width: 100%;
            max-width: 420px;
        }

        & .team-bio-hero__header {
            justify-content: space-between;
        }

        & .breadcrumbs {
            margin-bottom: 16px;

            & ul li,
            & ul li a,
            & ul li a:hover,
            & ul li a:focus,
            & ul li a:active {
                color: rgba(0, 163, 152, 1);
                font-family: Roboto;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 1.2;
                letter-spacing: -0.16px;
            }
        }
        
        & .team-bio-hero__left {
            margin-bottom: 0;
            
            & .team-bio-hero__name {
                color: #343A40;
                font-family: Roboto;
                font-size: 32px;
                font-style: normal;
                font-weight: 500;
                line-height: 1.2;
                letter-spacing: -0.16px;
            }

            & .team-bio-hero__title {
                font-family: Roboto;
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                line-height: 1.5;
            }
        }
    }
}