.Person {
    flex-basis: clamp(200px, calc(33% - 3rem), 500px);
    flex-grow: 1;
    flex-shrink: 0;
    align-items: center;
    justify-content: stretch;
    gap: 1rem;

    & img {
        outline: 4px solid var(--color-orange);
        border-radius: 50%;
        width: 150px;
        height: 150px;
        object-fit: cover;
    }

    & span {
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: bold;

        &:not(:last-child):after {
            content: " | "
        }
    }

    & p {
        text-align: center;
        white-space: pre-wrap;

        &:first-of-type {
            margin-top: -1rem;
        }
    }

    & .flavour {}

    & .button {
        margin-top: auto;
    }
}