.card-detailed {  

    border: 2px solid var(--color);
    display: block;
    /* height: calc(100% - var(--space-xl) * 2); */
    padding: var(--space-xl) var(--space-lg);
    transform: translateY(0);
    transition-property: transform;
    transition-duration: 500ms;
    margin-bottom: var(--space-md);
}
    /* background-color: var(--color); */

    .card-detailed .card-content {
        
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .card-detailed .card-content h2 {
            font-size: var(--step-2);
            font-style: normal;
            color: hsla(var(--text-black),1);
            font-weight: var(--semi-bold-weight);
            margin-top: var(--space-zero);
        }

    .card-detailed .card-content p {
            color: hsla(var(--text-black),1);

        }

    .card-detailed .card-content .link--text {
            font-family: var(--sans-serif);
            font-size: var(--step-0);  
            position: absolute;
            bottom: var(--space-lg);
            color: hsla(var(--text-black),1);

        }

    .card-detailed:hover, .card-detailed:focus {
        background-color: var(--color);
        /* cursor: pointer; */
        transform: translateY(calc(var(--space-sm) * -1));
        transition-property: transform;
        transition-duration: 500ms;
    }

    /* transition-delay: 2s; */

    .card-detailed:hover h2, .card-detailed:focus h2 {
            color: hsl(var(--menu-text));
        }

    .card-detailed:hover .link--text, .card-detailed:focus .link--text {
            color: hsl(var(--menu-text));
        }

    .card-detailed:hover p, .card-detailed:focus p {
            color: hsl(var(--menu-text));

        }