.team-section {
    padding: 20px;
    justify-content: center;
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 15px;

    background-color: var(--brand-dark);

    & .header {
        & .title {
            color: #fff;
            font-size: 2rem;
            margin: 0;
        }

        & .description {
            color: var(--stone-100);
            font-size: 16px;
            font-weight: 500;
        }
    }

    & .team-members {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        gap: 20px;

        max-width: 100%;
        overflow: auto;

        padding: 30px 50px 60px;

        &.mobile {
            justify-content: left;
        }

        & .arrow {
            all: unset;
            position: absolute;
            align-self: center;
            background-color: white;
            border-radius: 6px;
            width: 28px;
            height: 28px;
            cursor: pointer;

            -webkit-user-select: none;
            user-select: none;
            z-index: 1;

            &.left {
                left: 25px;
            }

            &.right {
                right: 25px;
            }

            &:hover {
                filter: brightness(95%);
            }

            &:active {
                filter: brightness(90%);
            }
        }

        & .team-member {
            align-self: end;
            cursor: pointer;

            transition: scale 0.2s ease-in-out;

            &.even {
                margin-bottom: 60px;
            }

            & img {
                height: 300px;
                border-radius: 100px;
                width: 177px;
                object-fit: cover;
            }

            & .name {
                color: var(--stone-100);
                font-size: 24px;
            }

            &:hover {
                scale: 1.05;
            }

            &.active {
                scale: 1.1;

                & img {
                    border: 3px solid white;
                }
            }
        }
    }

    & .team-text {
        --text-background-color: var(--stone-100);
        --text-border-color: var(--stone-200);
        --text-color: black;

        display: flex;
        flex-direction: column;
        width: 90%;
        max-width: 1200px;
        gap: 20px;

        background-color: var(--text-background-color);
        color: var(--text-color);
        border-radius: 10px;
        border: 1px solid var(--text-border-color);
        padding: 20px 40px;

        & .full-name {
            text-align: left;
            font-size: 30px;
        }

        & .message {
            text-align: justify;
            font-size: 16px;
        }
    }
}

.dark-theme {
    & .team-text {
        --text-background-color: var(--stone-800);
        --text-border-color: var(--stone-700);
        --text-color: white;
    }
}