.card--alex {
    /* background: linear-gradient(180deg, #0ea5e9 0%, #0369a1 100%); */

    background: linear-gradient(135deg, #3c6d78 0%, #183d5c 100%);

    .card__link-icon,
    .card__icon {
        fill: var(--color-white);
    }

    .card__name,
    .card__role,
    .card__link,
    .card__description {
        color: var(--color-white);
    }
}

.tech--alex {
    background-color: #fbc516;
}

.card--finn {
    background: linear-gradient(340deg, #2a7b9b 0%, #00ad48 100%);

    .card__link-icon,
    .card__icon {
        fill: var(--color-white);
    }

    .card__name,
    .card__role,
    .card__link,
    .card__description {
        text-shadow: 2px 2px 2px #00463f;
        color: var(--color-white);
    }
}

.tech--finn {
    color: #ffffff;
    border-style: solid;
    border-color: #26df86 #005c30 #005c30 #26df86;
    background-color: #00a364;
}

.tech--finn:hover {
    border-color: #005c30 #26df86 #26df86 #005c30;
    background-color: #00623d;
}

.card--finn svg {
    filter: drop-shadow(2px 2px 2px #005c30);
    transition: 0.2s ease-in-out;
}

.card--finn svg:hover {
    filter: drop-shadow(5px 5px 5px #005c30);
    transform: scale(1.5);
}

.card--jo {
    --card--jo-accent: rgb(180 151 238);
    background: radial-gradient(
        ellipse at left top,
        hsl(from var(--card--jo-accent) calc(h + 10) calc(s - 10) calc(l - 3))
            0%,
        var(--card--jo-accent) 100%
    );

    .card__link-icon,
    .card__icon {
        fill: var(--color-white);
        filter: drop-shadow(
            1px 1px 0
                hsla(
                    from var(--card--jo-accent) h calc(s - 40) calc(l - 40) /
                        60%
                )
        );
    }

    .card__name,
    .card__role,
    .card__link,
    .card__description {
        color: var(--color-white);
        text-shadow: 1px 1px 0
            hsla(from var(--card--jo-accent) h calc(s - 40) calc(l - 40) / 60%);
    }
}

.tech--jo {
    background-color: white;
    color: var(--card--jo-accent);
    text-shadow: 1px 1px 0 hsla(from var(--color-black) h s l / 10%);
}