.person-profile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;

    .picture {
        flex-shrink: 0;
        flex-grow: 1;
    }

    .image {
        display: block;
    }

    .name {
        margin-bottom: .3em;
    }

    .position {
        margin-bottom: 1.75em;
        font-size: 1rem;
    }

    @media (min-width: 768px) {
        flex-direction: row;

        &.reverse {
            flex-direction: row-reverse;
        }
    }

    @media (min-width: 768px) {
        &.imgbg:not(.reverse) .picture {
            margin-right: -14%;
            mask-image: linear-gradient(to right, rgba(255, 255, 255, 1) 72%, rgba(255, 255, 255, 0) 100%);
        }

        &.imgbg.reverse .picture {
            margin-left: -14%;
            mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 28%);
        }
    }

    &.imgbg {
        .picture {
            position: relative;

            @media (min-width: 768px) {
                width: 40%;
            }

            @media (min-width: 992px) {
                width: 50%;
            }
        }

        .content {
            position: relative;
            z-index: 1;

            @media (min-width: 768px) {
                width: 60%;
                padding: 2rem;
                padding-top: 4rem;
            }

            @media (min-width: 992px) {
                width: 50%;
            }

            &::before {
                content: "";
                display: block;
                width: 150px;
                max-width: 30%;
                max-height: 50%;
                height: 150px;
                position: absolute;
                pointer-events: none;
                bottom: -5px;
                right: -5px;
                border: 5px solid var(--abc-red);
                border-width: 0 5px 5px 0;
            }
        }

        .name {
            color: var(--abc-red);
        }

        .position {
            color: var(--abc-dark-gray);
        }
    }

    @media (min-width: 768px) {
        &.imgbg:not(.reverse) .content::before {
            top: -10px;
            bottom: auto;
            border-width: 10px 10px 0 0;
        }

        &.imgbg.reverse .content::before {
            top: -10px;
            left: -10px;
            right: auto;
            bottom: auto;
            border-width: 10px 0 0 10px;
        }
    }


    .social-links {
        &:empty {
            display: none;
        }

        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 1rem;
        margin-top: 1rem;

        a {
            display: block;
            width: 48px;
            height: 48px;
            background-repeat: no-repeat;
            text-indent: -1000px;
            overflow: hidden;
        }

        a.web {
            background-image: url("../../Icons/website.svg");
        }

        a.xing {
            background-image: url("../../Icons/xing.svg");
        }

        a.linkedin {
            background-image: url("../../Icons/linkedin.svg");
        }
    }

    &.plain {
        margin-bottom: 3rem;

        .picture {
            max-width: 280px;

            @media (min-width: 768px) {
                width: 30%;
            }
        }

        .image {
            border-radius: 1rem;
        }
    }
}