.card
    --transition-time: 0.15s
    --hover-color: #0070f3

    background-color: var(--color-0)

    margin: 1rem
    text-align: left
    color: inherit
    text-decoration: none
    border: 2px solid var(--color-0)
    border-radius: 10px

    min-width: 166px
    width: 20vw
    max-width: 250px

    min-height: 250px
    height: 30vw
    max-height: 375px

    display: flex
    flex-direction: column
    justify-content: flex-start
    align-content: space-around

    text-overflow: ellipsis
    overflow: hidden

    transition: var(--transition-time) color, var(--transition-time) border-color

    & > *
        padding-bottom: 1.5rem
        padding-left: 1.5rem
        padding-right: 1.5rem

    &:hover,

    &:focus,

    &:active
        color: var(--hover-color)
        border-color: var(--hover-color)
        background-color: var(--color-black)

    &_gitea
        --hover-color: #609926

    &_github
        --hover-color: #4078c0

    & > span,
    & > img
        max-width: 100px !important
        max-height: 100px !important

        min-width: 56px !important
        width: 15vw !important

        min-height: 83px !important
        height: 15vw !important

        padding: 0 !important
        margin: 50px auto !important
        transition: var(--transition-time) filter

    & img
        flex-grow: 3
        filter: invert(98%) sepia(29%) saturate(491%) hue-rotate(301deg) brightness(99%) contrast(98%)

    &_gitea:hover img
        filter: invert(53%) sepia(18%) saturate(1808%) hue-rotate(47deg) brightness(96%) contrast(79%)
        fill: var(--hover-color)
        stroke: var(--hover-color)

    & img.card_mockup
        background-color: #f8f8f8
        width: calc(100% - 3rem)
        min-height: 150px
        min-width: 150px
        max-width: 100%
        max-height: 100%
        margin: 0
        border-radius: 10px 10px 0px 0px

    & h2
        margin: 0 0 1rem 0
        font-size: 1.5rem

    & p
        margin: 0
        font-size: 1rem
        line-height: 1.4
        height: 5vw
        text-overflow: ellipsis
        overflow: hidden