/*
 * Card pictures of a list (kit `site`, `Render\CardLayout`): aspect ratio, fit and focal point as classes, because the CSP
 * of the sites does not allow inline `style`.
 *
 * Load it BEFORE the site's stylesheet. The list carries `cards-ratio-*` and `cards-fit-*` (CardLayout::listClass), a
 * picture `card-media` (a picture of the content with a focal point: `focal`, written by BlockRenderer) plus `fx-<0..100>` / `fy-<0..100>` in steps of 2 (CardLayout::focalClass). A site can set the
 * variables itself (`--card-ratio`, `--card-fit`, `--fx`, `--fy`) wherever it wants another default.
 */

.cards-ratio-3-2 { --card-ratio: 3 / 2; }
.cards-ratio-4-3 { --card-ratio: 4 / 3; }
.cards-ratio-1-1 { --card-ratio: 1 / 1; }
.cards-ratio-original { --card-ratio: auto; }
.cards-fit-cover { --card-fit: cover; }
.cards-fit-contain { --card-fit: contain; }

.focal { object-position: var(--fx, 50%) var(--fy, 50%); }   /* a cropped picture of the content (image block, gallery tile) */

.card-media {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--card-ratio, 3 / 2);
    object-fit: var(--card-fit, cover);
    object-position: var(--fx, 50%) var(--fy, 50%);
}

.fx-0 { --fx: 0%; } .fx-2 { --fx: 2%; } .fx-4 { --fx: 4%; } .fx-6 { --fx: 6%; } .fx-8 { --fx: 8%; } .fx-10 { --fx: 10%; } .fx-12 { --fx: 12%; } .fx-14 { --fx: 14%; } .fx-16 { --fx: 16%; } .fx-18 { --fx: 18%; } .fx-20 { --fx: 20%; } .fx-22 { --fx: 22%; } .fx-24 { --fx: 24%; } .fx-26 { --fx: 26%; } .fx-28 { --fx: 28%; } .fx-30 { --fx: 30%; } .fx-32 { --fx: 32%; } .fx-34 { --fx: 34%; } .fx-36 { --fx: 36%; } .fx-38 { --fx: 38%; } .fx-40 { --fx: 40%; } .fx-42 { --fx: 42%; } .fx-44 { --fx: 44%; } .fx-46 { --fx: 46%; } .fx-48 { --fx: 48%; } .fx-50 { --fx: 50%; } .fx-52 { --fx: 52%; } .fx-54 { --fx: 54%; } .fx-56 { --fx: 56%; } .fx-58 { --fx: 58%; } .fx-60 { --fx: 60%; } .fx-62 { --fx: 62%; } .fx-64 { --fx: 64%; } .fx-66 { --fx: 66%; } .fx-68 { --fx: 68%; } .fx-70 { --fx: 70%; } .fx-72 { --fx: 72%; } .fx-74 { --fx: 74%; } .fx-76 { --fx: 76%; } .fx-78 { --fx: 78%; } .fx-80 { --fx: 80%; } .fx-82 { --fx: 82%; } .fx-84 { --fx: 84%; } .fx-86 { --fx: 86%; } .fx-88 { --fx: 88%; } .fx-90 { --fx: 90%; } .fx-92 { --fx: 92%; } .fx-94 { --fx: 94%; } .fx-96 { --fx: 96%; } .fx-98 { --fx: 98%; } .fx-100 { --fx: 100%; }

.fy-0 { --fy: 0%; } .fy-2 { --fy: 2%; } .fy-4 { --fy: 4%; } .fy-6 { --fy: 6%; } .fy-8 { --fy: 8%; } .fy-10 { --fy: 10%; } .fy-12 { --fy: 12%; } .fy-14 { --fy: 14%; } .fy-16 { --fy: 16%; } .fy-18 { --fy: 18%; } .fy-20 { --fy: 20%; } .fy-22 { --fy: 22%; } .fy-24 { --fy: 24%; } .fy-26 { --fy: 26%; } .fy-28 { --fy: 28%; } .fy-30 { --fy: 30%; } .fy-32 { --fy: 32%; } .fy-34 { --fy: 34%; } .fy-36 { --fy: 36%; } .fy-38 { --fy: 38%; } .fy-40 { --fy: 40%; } .fy-42 { --fy: 42%; } .fy-44 { --fy: 44%; } .fy-46 { --fy: 46%; } .fy-48 { --fy: 48%; } .fy-50 { --fy: 50%; } .fy-52 { --fy: 52%; } .fy-54 { --fy: 54%; } .fy-56 { --fy: 56%; } .fy-58 { --fy: 58%; } .fy-60 { --fy: 60%; } .fy-62 { --fy: 62%; } .fy-64 { --fy: 64%; } .fy-66 { --fy: 66%; } .fy-68 { --fy: 68%; } .fy-70 { --fy: 70%; } .fy-72 { --fy: 72%; } .fy-74 { --fy: 74%; } .fy-76 { --fy: 76%; } .fy-78 { --fy: 78%; } .fy-80 { --fy: 80%; } .fy-82 { --fy: 82%; } .fy-84 { --fy: 84%; } .fy-86 { --fy: 86%; } .fy-88 { --fy: 88%; } .fy-90 { --fy: 90%; } .fy-92 { --fy: 92%; } .fy-94 { --fy: 94%; } .fy-96 { --fy: 96%; } .fy-98 { --fy: 98%; } .fy-100 { --fy: 100%; }