.team {
    padding: var(--spacing-mega) 0;
    position: relative;
    background-color: var(--color-primary-dark);
    color: var(--color-primary-light);
    overflow: hidden;
}

.team-inner {
    max-width: 1200px;
    display: flex;
    flex-direction: column-reverse;
    position: relative;
    padding: var(--spacing-lg) var(--spacing-md);
}

.team-images {
    position: relative;
    padding-bottom: 25%;
}



.team-images svg {
    display: none;
}

.team-photo {
    width: 80%;
    border-radius: 50%;
    box-shadow: 48px 0 200px 0 var(--color-highlight);
    z-index: 4;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}

.team-photo img {
    width: 100%;
    border-radius: 50%;
}

.active-photo {
    z-index: 5;
}

/*TEXT*/

.team-heading h2 {
    font-size: 2rem;
    text-decoration: underline;
    position: relative;
}

.team-tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.team-tab {
    cursor: pointer;
    transition: 0.4s;
}


.team-tab-list .active-tab,
.active-tab .team-member-name,
.team-tab:hover,
.team-tab:hover .team-member-name {
    color: var(--color-highlight);
}

.team-member-name {
    color: white;
    transition: 0.4s;
}

.team-heading {
    position: absolute;
    top: -60px;
    left: var(--spacing-md);
}

@media screen and (min-width: 948px) {

    .team-images svg,
    .team-photo {
        top: 50%;
        left: 0;
    }

    .team-tab-list {
        display: block;
    }

    .team-tab {
        margin: var(--spacing-x-lg) 0;
    }

    .team-heading {
        position: static;
    }

    .team-heading h2 {
        left: -24px;
    }

    .team-inner {
        flex-direction: row;
    }

    .team-tab:nth-child(2),
    .team-tab:nth-child(5) {
        margin-left: var(--spacing-md);
    }

    .team-tab:nth-child(3),
    .team-tab:nth-child(4) {
        margin-left: var(--spacing-lg);
    }

    .team-inner>* {
        width: 50%;
    }

    .team-images {
        padding-bottom: 0;
    }

    .team-images svg {
        width: 100%;
        position: absolute;
        transform: translate(-50%, -50%);
        display: block;
        width: 200%;
        height: 200%;
    }

    .team-photo {
        width: 75%;
        left: 0;
        transform: 0;
        transform: translateY(-50%);
    }

}

@media screen and (min-width: 1248px) {

    .team-inner {
        padding: var(--spacing-lg) 0;
    }

}