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(--hejny-palette-2) 10%, var(--hejny-palette-0) 100%);

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

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

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;
}