.person-list {
    display: flex;
    flex-direction: column;
    gap: 2px;

    .person {
        display: flex;
        background-color: var(--anresis-color-grey-2-background);
        padding: var(--anresis-spacing-4);
        gap: var(--anresis-spacing-7);

        .person-image {
            display: flex;
            flex-shrink: 0;
            align-items: flex-start;
            justify-content: center;
            width: 120px;

            > img {
                border-radius: 50%;
            }
        }

        .person-name {
            font: var(--anresis-font-h3);
        }

        .person-email {
            font: var(--anresis-font-text);
        }

        .person-metadata {
            display: flex;
            gap: var(--anresis-spacing-7);
            flex-grow: 1;

        }

        .person-information {
            width: 50%;
            flex-grow: 1;
            flex-shrink: 0;
        }

        .person-description {
            width: 50%;

            > :last-child {
                margin-block-end: 0;
            }
        }

        @media (max-width: 1023px) {
            .person-metadata {
                display: block;
            }

            .person-description {
                margin-block-start: var(--anresis-spacing-7);
            }
        }

        @media (max-width: 479px) {
            flex-wrap: wrap;
            .person-image {
                width: 100%;   
            }
        }
    }
}