.card {
    --card-border-width: 2px;
    --card-width-1: 240px;
    --card-margin: 10px;

    position: relative;
    display: inline-block;
    margin: var(--card-margin);
    border-radius: 10px;
    background: var(--color-card-bg);
    width: fit-content;
    height: fit-content;
    /*overflow: hidden;*/


    &::before, &::after {
        content: '';
        position: absolute;
        z-index: -1;
    }

    &::before {
        background-image: var(--gradient);
        border-radius: 14px;
        filter: blur(2px);
        opacity: 0.7;
        left: calc(var(--card-border-width) * -1.5);
        right: calc(var(--card-border-width) * -1.5);
        top: calc(var(--card-border-width) * -1.5);
        bottom: calc(var(--card-border-width) * -1.5);
    }

    &::after {
        background-image: var(--gradient);
        border-radius: 12px;
        left: calc(var(--card-border-width) * -1);
        right: calc(var(--card-border-width) * -1);
        top: calc(var(--card-border-width) * -1);
        bottom: calc(var(--card-border-width) * -1);
    }

    &.cardHeight_1 {
        min-height: calc(var(--card-width-1));
    }

    &.cardWidth_1 {
        min-width: var(--card-width-1);
        max-width: var(--card-width-1);
    }

    &.cardWidth_2 {
        min-width: calc(var(--card-width-1) * 2 + var(--card-margin) * 2);
        max-width: calc(var(--card-width-1) * 2 + var(--card-margin) * 2);
    }

    & .cardStructure {
        position: relative;
        width: fit-content;
        height: fit-content;
        overflow: hidden;
        border-radius: 9px; /* unfortunately not inherit - there are slight glitches with cardTip */

        & > * {
            padding: 0 20px;
        }

        & .cardContent {
            position: relative;
            width: fit-content;
            height: fit-content;
            padding: 20px;

            &.logoImg {
                padding: calc(var(--card-width-1) / 3);

                & img {
                    display: block; /* remove gap after inline-block img - see https://stackoverflow.com/questions/7774814/remove-white-space-below-image */
                    width: calc(var(--card-width-1) / 3);
                }
            }

            &.personImg {
                padding: 0;

                & img {
                    display: block; /* remove gap after inline-block img - see https://stackoverflow.com/questions/7774814/remove-white-space-below-image */
                    width: var(--card-width-1);
                }
            }
        }

        & .cardTip {
            position: absolute;
            left: 0;
            right: 0;
            background-image: var(--gradient);
            color: var(--color-headline-on-gradient);
            height: 30px;
            line-height: 30px;
            z-index: 1;

            bottom: -35px;
            transition: all 0.1s ease-in-out;
        }
    }

    :hover {
        & .cardTip {
            bottom: 0;
        }
    }
}

@media only screen and (max-width: 650px) {
    .card {
        &.cardWidth_2 {
            min-width: var(--card-width-1);
            max-width: var(--card-width-1);
            height: auto;
        }
    }
}