.cards
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5em;
}

/*--------------------------------------------------------------
    Carte
--------------------------------------------------------------*/

.card
{
    flex: 1 1 320px;
    max-width: 420px;

    display: flex;
    align-items: center;

    gap: 1.2em;

    padding: 1.4em;

    text-decoration: none;
    color: inherit;

    background: rgba(255,255,255,.88);

    border-radius: 14px;
    /* border-left: 6px solid #d47a1f; */

    background-color: #fcf7ee;    

    box-shadow: 0 6px 16px rgba(0,0,0,.18);



    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.card:hover
{
    transform: translateY(-4px);

    background: white;

    box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

/*--------------------------------------------------------------
    Icône
--------------------------------------------------------------*/
.card-icon
{
    width: 130px;
    height: 130px;

    flex-shrink: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    border-radius: 50%;

    background: #f2f7fb;

    box-shadow: inset 0 0 8px rgba(0,0,0,.08);
}

.card-icon img
{
    max-width: 80%;
    max-height: 80%;

    width: auto;
    height: auto;
}
/*--------------------------------------------------------------
    Contenu
--------------------------------------------------------------*/

.card-content
{
    display: flex;
    flex-direction: column;

    flex: 1;
}

.card h3
{
    margin: 0;

    font-size: 1.45rem;

    color: #184c72;
}

.card p
{
    margin: .6em 0 1em;

    line-height: 1.5;

    color: #444;
}

/*--------------------------------------------------------------
    Lien
--------------------------------------------------------------*/

.card-link
{
    align-self: flex-start;

    font-weight: bold;

    color: #d47a1f;
}

.card.beginner
{
    border-left-color: #d47a1f;
}

.card.beginner .card-link
{
    color: #d47a1f;
}

.card.advanced
{
    border-left-color: #2d78c4;
}

.card.advanced .card-link
{
    color: #2d78c4;
}

.card.intermediate
{
    border-left-color: #3c9b4a;
}

.card.intermediate .card-link
{
    color: #3c9b4a;
}