.cards {
    --column-gap: 2rem;
    --row-gap: 2rem;
    --font-size: var(--root-font-size); /* Reset, use REM */
}

.cards[data-maximum-columns="2"] {
    --column-gap: 1.5rem;
}

.cards[data-maximum-columns="3"] {
    --column-gap: 1.5rem;
}

@media (min-width: 48rem) {
    .cards[data-maximum-columns="2"] {
        --column-gap: 4rem;
    }
}

.cards {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 30rem) {
    .cards[data-maximum-columns="2"],
    .cards[data-maximum-columns="3"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 62rem) {
    .cards[data-maximum-columns="3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cards {
    font-size: var(--font-size, 1rem);
    grid-column-gap: var(--column-gap, 2rem);
    grid-row-gap: var(--row-gap, 2rem);
}

.cards[data-maximum-columns="1"] {
    grid-row-gap: 0;
}

.card {
    --box-shadow: var(--root-box-shadow);
    --color-background: var(--root-color--white);
    --color-border-top: var(--root-color-border);
    --font-size: var(--root-font-size); /* Reset, use REM */
    --width-border-top: var(--root-border-width);
}

.card:not(.card--color).card--image-none {
    /*--color-background: inherit;*/
}

.card:not(.card--button) .card__link:focus,
.card:not(.card--button) .card__link:hover {
    --color-background: var(--root-color-interaction);
}

.card:not(.card--color).card--image-none .card__link:focus,
.card:not(.card--color).card--image-none .card__link:hover {
    /*--color-background: inherit;*/
}

.card.card--color-primary {
    /*--box-shadow: inherit;*/
    --color-background: var(--root-color-background--primary);
}

.card.card--color-primary:not(.card--button) .card__link:focus,
.card.card--color-primary:not(.card--button) .card__link:hover {
    --color-background: var(--root-color-background--primary-dark);
}

.card.card--color-secondary {
    /*--box-shadow: inherit;*/
    --color-background: var(--root-color-background--secondary);
}

.card.card--color-secondary:not(.card--button) .card__link:focus,
.card.card--color-secondary:not(.card--button) .card__link:hover {
    --color-background: var(--root-color-background--secondary-dark);
}

.card.card--color-support {
    /*--box-shadow: inherit;*/
    --color-background: var(--root-color-background--support);
}

.card.card--color-support:not(.card--button) .card__link:focus,
.card.card--color-support:not(.card--button) .card__link:hover {
    --color-background: var(--root-color-background--support-dark);
}

/* Container */
.card__visual {
    --order: 1;
}

.card__body {
    --order: 2;
}

.card__footer {
    --order: 3;
}

.section:not(.section--color) .card:not(.card--color).card--image-none .card__body,
.section:not(.section--color) .card:not(.card--color).card--image-none .card__footer {
    --padding-horizontal: 0;
}

/* Body */
.card__title {
    --color: var(--root-color--primary);
    --font-family: var(--root-heading-3-family);
    --font-size: var(--root-heading-3-size);
    --font-style: var(--root-heading-3-style);
    --font-weight: var(--root-heading-3-weight);
    --line-height: var(--root-heading-3-line-height);
}

.card--color-primary .card__title {
    --color: var(--root-color--white);
    /*--font-family: var(--root-heading-3-family);*/
    /*--font-size: var(--root-heading-3-size);*/
    /*--font-style: var(--root-heading-3-style);*/
    /*--font-weight: var(--root-heading-3-weight);*/
    /*--line-height: var(--root-heading-3-line-height);*/
}

.card--color-secondary .card__title {
    --color: var(--root-color-text);
    /*--font-family: var(--root-heading-3-family);*/
    /*--font-size: var(--root-heading-3-size);*/
    /*--font-style: var(--root-heading-3-style);*/
    /*--font-weight: var(--root-heading-3-weight);*/
    /*--line-height: var(--root-heading-3-line-height);*/
}

.card--color-support .card__title {
    --color: var(--root-color-text);
    /*--font-family: var(--root-heading-3-family);*/
    /*--font-size: var(--root-heading-3-size);*/
    /*--font-style: var(--root-heading-3-style);*/
    /*--font-weight: var(--root-heading-3-weight);*/
    /*--line-height: var(--root-heading-3-line-height);*/
}

.section:not([data-maximum-columns="2"]) .cards[data-maximum-columns="2"] .card .card__title {
    --font-family: var(--root-heading-2-family);
    --font-size: var(--root-heading-2-size);
    --font-style: var(--root-heading-2-style);
    --font-weight: var(--root-heading-2-weight);
    --line-height: var(--root-heading-2-line-height);
}

.card:not(.card--color).card--image-none .card__title,
.section:not([data-maximum-columns="2"]) .cards[data-maximum-columns="2"] .card:not(.card--color).card--image-none .card__title {
    --color: var(--root-color--primary);
    /*--font-family: var(--root-heading-3-family);*/
    /*--font-size: var(--root-heading-3-size);*/
    /*--font-style: var(--root-heading-3-style);*/
    /*--font-weight: var(--root-heading-3-weight);*/
    /*--line-height: var(--root-heading-3-line-height);*/
}

.card__date {
    --color: var(--root-color-text);
    --font-family: inherit;
    --font-size: 0.833em; /* Mobile 13px / > Mobile 15px */
    --font-style: normal;
    --font-weight: var(--root-font-weight--normal);
    --line-height: inherit;
}

.card:not(.card--color).card--image-none .card__date {
    /*--color: inherit;*/
}

.card--color-primary .card__date {
    --color: var(--root-color--white);
    /*--font-family: inherit;*/
    /*--font-size: 0.833em; !* Mobile 13px / > Mobile 15px *!*/
    /*--font-style: normal;*/
    /*--font-weight: var(--root-font-weight--normal);*/
    /*--line-height: inherit;*/
}

.card--color-secondary .card__date {
    --color: var(--root-color-text);
    /*--font-family: inherit;*/
    /*--font-size: 0.833em; !* Mobile 13px / > Mobile 15px *!*/
    /*--font-style: normal;*/
    /*--font-weight: var(--root-font-weight--normal);*/
    /*--line-height: inherit;*/
}

.card--color-support .card__date {
    --color: var(--root-color-text);
    /*--font-family: inherit;*/
    /*--font-size: 0.833em; !* Mobile 13px / > Mobile 15px *!*/
    /*--font-style: normal;*/
    /*--font-weight: var(--root-font-weight--normal);*/
    /*--line-height: inherit;*/
}

.card__excerpt {
    --color: var(--root-color-text);
    --font-family: inherit;
    --font-size: 1em; /* Mobile 16px / > Mobile 18px */
    --font-style: normal;
    --font-weight: var(--root-font-weight--normal);
    --line-height: inherit;
    --order: 3;
}

.card:not(.card--color).card--image-none .card__excerpt {
    /*--color: inherit;*/
}

.card--color-primary .card__excerpt {
    --color: var(--root-color--white);
    /*--font-family: inherit;*/
    /*--font-size: 1em; !* Mobile 16px / > Mobile 18px *!*/
    /*--font-style: normal;*/
    /*--font-weight: var(--root-font-weight--normal);*/
    /*--line-height: inherit;*/
}

.card--color-secondary .card__excerpt {
    --color: var(--root-color-text);
    /*--font-family: inherit;*/
    /*--font-size: 1em; !* Mobile 16px / > Mobile 18px *!*/
    /*--font-style: normal;*/
    /*--font-weight: var(--root-font-weight--normal);*/
    /*--line-height: inherit;*/
}

.card--color-support .card__excerpt {
    --color: var(--root-color-text);
    /*--font-family: inherit;*/
    /*--font-size: 1em; !* Mobile 16px / > Mobile 18px *!*/
    /*--font-style: normal;*/
    /*--font-weight: var(--root-font-weight--normal);*/
    /*--line-height: inherit;*/
}

/* Footer */
.card__arrow {
    --color: var(--root-color--primary);
}

.card:not(.card--color).card--image-none .card__arrow {
    /*--color: inherit;*/
}

.card--color-primary .card__arrow {
    --color: var(--root-color--white);
}

.card--color-secondary .card__arrow {
    --color: var(--root-color-text);
}

.card--color-support .card__arrow {
    --color: var(--root-color-text);
}

.card--button .button {
    --background-color: var(--root-color--primary);
    --border-top-color: var(--root-color--primary);
    --border-right-color: var(--root-color--primary);
    --border-bottom-color: var(--root-color--primary);
    --border-left-color: var(--root-color--primary);
    --color: var(--root-color--white);
    /*--font-weight: var(--root-font-weight--normal);*/
}

.card--button .button:active,
.card--button .button:focus,
.card--button .button:hover {
    --background-color: var(--root-color--primary-dark);
    --border-top-color: var(--root-color--primary-dark);
    --border-right-color: var(--root-color--primary-dark);
    --border-bottom-color: var(--root-color--primary-dark);
    --border-left-color: var(--root-color--primary-dark);
}

.card--color-primary .button {
    --background-color: var(--root-color--white);
    --border-top-color: var(--root-color--white);
    --border-right-color: var(--root-color--white);
    --border-bottom-color: var(--root-color--white);
    --border-left-color: var(--root-color--white);
    --color: var(--root-color-text);
}

.card--color-primary .button:active,
.card--color-primary .button:focus,
.card--color-primary .button:hover {
    --background-color: var(--root-color--white-dark);
    --border-top-color: var(--root-color--white-dark);
    --border-right-color: var(--root-color--white-dark);
    --border-bottom-color: var(--root-color--white-dark);
    --border-left-color: var(--root-color--white-dark);
}

.card--color-secondary .button {
    --background-color: var(--root-color--white);
    --border-top-color: var(--root-color--white);
    --border-right-color: var(--root-color--white);
    --border-bottom-color: var(--root-color--white);
    --border-left-color: var(--root-color--white);
    --color: var(--root-color-text);
}

.card--color-secondary .button:active,
.card--color-secondary .button:focus,
.card--color-secondary .button:hover {
    --background-color: var(--root-color--white-dark);
    --border-top-color: var(--root-color--white-dark);
    --border-right-color: var(--root-color--white-dark);
    --border-bottom-color: var(--root-color--white-dark);
    --border-left-color: var(--root-color--white-dark);
}

.card--color-support .button {
    --background-color: var(--root-color--primary);
    --border-top-color: var(--root-color--primary);
    --border-right-color: var(--root-color--primary);
    --border-bottom-color: var(--root-color--primary);
    --border-left-color: var(--root-color--primary);
    --color: var(--root-color--white);
}

.card--color-support .button:active,
.card--color-support .button:focus,
.card--color-support .button:hover {
    --background-color: var(--root-color--primary-dark);
    --border-top-color: var(--root-color--primary-dark);
    --border-right-color: var(--root-color--primary-dark);
    --border-bottom-color: var(--root-color--primary-dark);
    --border-left-color: var(--root-color--primary-dark);
}

.card {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.card__link {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-decoration: none;
    transition: box-shadow 200ms ease-in-out;
}

.section:not(.section-color) .card.card--image-none .card__link {
    transition: initial;
}

.section:not(.section--color) .card:not(.card--color).card--image-none .card__link {
    border-top-style: solid;
}

.card__visual {

}

.card__image {
    display: block;
    width: 100%;
    height: auto;
}

.card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1.5rem 1.5rem 1rem;
}

.section:not(.section--color) .card:not(.card--color).card--image-none .card__body {
    padding-top: 1rem;
    padding-left: 0;
    padding-right: 0;
}

.section:not(.section--color) .cards[data-maximum-columns="1"] .card:not(.card--color).card--image-none .card__body {
    padding-left: 1rem;
    padding-right: 1rem;
}

.card__body > *:first-child {
    margin-top: 0;
}

.card__title + .card__excerpt {
    margin-top: 0.5rem;
}

.card__date {
    margin-top: 1rem;
}

.card__date__icon {
    fill: currentColor;
    width: 1.25em;
    height: 1.25em;
    vertical-align: sub;
}

.card__footer {
    display: flex;
    justify-content: flex-end;
    padding: 1.5rem;
}

.section:not(.section--color) .card:not(.card--color).card--image-none .card__footer {
    padding-left: 0;
    padding-right: 0;
}

.section:not(.section--color) .cards[data-maximum-columns="1"] .card:not(.card--color).card--image-none .card__footer {
    padding-left: 1rem;
    padding-right: 1rem;
}

.card__body + .card__footer {
    padding-top: 0;
}

.card__button {
    margin-right: auto;
}

.card__categories {
    flex-grow: 1;
}

.card__arrow {
    align-self: center;
    flex-grow: 0;
    width: 1em;
    height: 1em;
    margin-left: 1rem;
}

@media (min-width: 62rem) {
    .cards[data-maximum-columns="2"] .card__body,
    .cards[data-maximum-columns="2"] .card__footer {
        padding: 2rem;
    }

    .cards[data-maximum-columns="2"] .card__body + .card__footer {
        padding-top: 0;
    }

    .cards[data-maximum-columns="2"] .card__footer .button {
        margin-top: 0;
    }

    .list--facetting .cards[data-maximum-columns="2"] .card__body,
    .list--facetting .cards[data-maximum-columns="2"] .card__footer {
        padding: 1.5rem;
    }

    .list--facetting .cards[data-maximum-columns="2"] .card__body + .card__footer {
        padding-top: 0;
    }
}

.card {
    font-size: var(--font-size, 1rem);
}

.card--button,
.card__link,
.card__no-link {
    background-color: var(--color-background, #ffffff);
}

.card--button,
.card:not(.card--image-none) .card__link,
.section.section--color .card.card--image-none .card__link,
.card__no-link {
    box-shadow: var(--box-shadow, 0 0.15rem 0.5rem 0 rgba(0, 0, 0, 0.16));
}

.card .card__link:active,
.card .card__link:focus,
.card .card__link:hover {
    box-shadow: initial;
}

.section:not(.section--color) .card.card--image-none .card__link:active,
.section:not(.section--color) .card.card--image-none .card__link:focus,
.section:not(.section--color) .card.card--image-none .card__link:hover {
    box-shadow: 0 0 0 0.5rem var(--color-background);
}

.section:not(.section--color) .cards[data-maximum-columns="1"] .card.card--image-none .card__link:active,
.section:not(.section--color) .cards[data-maximum-columns="1"] .card.card--image-none .card__link:focus,
.section:not(.section--color) .cards[data-maximum-columns="1"] .card.card--image-none .card__link:hover {
    box-shadow: 0 0 0 0 var(--color-background);
}

.section:not(.section--color) .card:not(.card--color).card--image-none .card__link {
    border-top-color: var(--color-border-top, hsla(0, 0%, 0%, 0.2));
    border-top-width: var(--width-border-top, 0.063rem);
}

/* Container */
.card__visual {
    order: var(--order, 1);
}

.card__body {
    order: var(--order, 2);
}

.card__footer {
    order: var(--order, 3);
}

/* Body */
.card__title {
    color: var(--color, #000000);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1.777em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, bold);
    line-height: var(--line-height, inherit);
    order: var(--order, 1);
}

.card__date {
    color: var(--color, #000000);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 0.833em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    line-height: var(--line-height, inherit);
    order: var(--order, 2);
}

.card__excerpt {
    color: var(--color, #000000);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    line-height: var(--line-height, inherit);
    order: var(--order, 3);
}

/* Footer */

.card__arrow .icon {
    fill: var(--color, #000000);
}