person-list {
    /*/
    outline: 1px dotted rgb(255, 38, 38);
    /**/

    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

person-list > * {
    width: calc(100% / 1);
    margin-bottom: 5vh;
}

@media only screen and (min-width: 650px) {
    person-list > * {
        width: calc(100% / 2 - 10px);
    }
}

@media only screen and (min-width: 800px) {
    person-list > * {
        width: calc(100% / 3 - 10px);
    }
}

/*
@media only screen and (min-width: 900px) {
    person-list > * {
        width: calc(100% / 4);
    }
}

@media only screen and (min-width: 1050px) {
    v person-list > * {
        width: calc(100% / 5);
    }
}

@media only screen and (min-width: 1200px) {
    person-list > * {
        width: calc(100% / 6);
    }
}

@media only screen and (min-width: 1600px) {
    person-list > * {
        width: calc(100% / 7);
    }
}
*/

person-item {
    /*/
    outline: 1px dotted rgb(255, 38, 38);
    /**/

    display: grid;
    grid-template:
        '🐷' max-content
        '🅰' min-content
        '🆎' min-content
        '🔡' min-content
        / 1fr;

    cursor: pointer;
}

person-item * {
    transition: all 0.1s ease-in-out;
}

person-item:hover * {
    opacity: 1;
    filter: saturate(1);
}

person-item person-avatar {
    /*/
    outline: 1px dotted rgb(255, 38, 38);
    /**/

    z-index: 1;
    order: 1;

    width: 100%;
    aspect-ratio: 1 / 1;
    grid-area: 🐷;

    font-size: 0 /* <- Note: This is a hack to have zero margin on avatar picture */;
    border-radius: 30px;
    overflow: clip;
    background-image: radial-gradient(circle at 50% 80%, var(--palette-2) 10%, var(--palette-0) 100%)
        /* TODO: [1] Make moving background in the future */;

    opacity: 0.9;
    filter: saturate(0.9);
}

person-item person-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}

/*
TODO: [1]
person-item person-avatar div[style*='background-image'] {
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;

    /* transition: all 2s ease-in-out /* <- TODO: Unite transition effects ACRY * /
}
*/

/*
TODO: [1]
person-item .personImageContainer {
    //
    outline: 1px dotted rgb(255, 38, 38);
    //

    z-index: 1;
    order: 1;

    grid-column: 1 / span 1;
    grid-row: 1 / span 1;

    aspect-ratio: 1 / 1;

    margin: 30px;
    margin-bottom: 0;
    border-radius: 50px /* <- TODO: [0] why this needs to be here 2x to propperly work? * /;

    box-shadow: #00000077 -25px 25px 0px; /* <- TODO: Paralax effect on shadow * /
}.
*/

/*
TODO: [1]
person-item .personImageContainer img {
    //
    outline: 1px dotted rgb(255, 38, 38);
    //

    width: 100%;
    height: 100%;
    border-radius: 50px /* <- TODO: [0] why this needs to be here 2x to propperly work? * /;

    background-image: radial-gradient(circle at center, #b4952c 0%, #000000 120%)
        /* <- TODO: [💫] What is the propper place for this radial-gradient, in JSX or in CSS module + DRY * /;

    object-fit: cover;
}
*/

/*
TODO: [1]
person-item:hover person-avatar div[style*='background-image'] {
    background-size: 200% 200%;
}
*/

/*
TODO: [1]
person-item .overlay {
 
    outline: 1px dotted rgb(255, 38, 38);


    z-index: 2;
    order: 2;

    grid-column: 1 / span 1;
    grid-row: 1 / span 1;

    background-color: rgba(0, 0, 0, 0.37);
    transition: all 0.2s ease-in-out;
}
*/

person-item person-name {
    /*/
    outline: 1px dotted rgb(58, 58, 255);
    /**/

    height: 100%;
    width: 100%;
    grid-area: 🅰;

    text-align: center;
    font-size: 1.7rem;

    margin-top: 8px;

    opacity: 0.9;
}

person-item person-title {
    /*/
    outline: 1px dotted rgb(58, 58, 255);
    /**/

    height: 100%;
    width: 100%;
    grid-area: 🆎;

    text-align: center;
    font-size: 1.3rem;

    margin-top: 4px;

    opacity: 0.8;
}

person-item person-description {
    /*/
    outline: 1px dotted rgb(248 248 57);
    /**/

    height: 100%;
    width: 100%;
    grid-area: 🔡;

    text-align: left;

    font-size: 1rem;

    margin-top: 4px;

    opacity: 0.7;
}

person-item person-description p:not(:last-child) {
    /*/
    outline: 1px dotted rgb(248 248 57);
    /**/

    margin-bottom: 10px;
}