/*
 * Utility classes for card images.
 *
 * The values live in class names rather than style attributes because the CSP
 * is `default-src 'self'` with no style-src exception, so inline styles are
 * blocked. Generated in steps; see the README for the regeneration snippet.
 *
 * focus: 0-100 in steps of 5   width: 80-400px in steps of 20
 */

.card-image {
  flex: none;
  overflow: hidden;
  border-radius: var(--radius);
  /* Transparent, not --paper: the card is --paper-raised, and the near-white
     mismatch drew a visible rectangle around contained images. */
  background: transparent;
  align-self: flex-start;
}

.card-image img {
  display: block;
  width: 100%;
  height: 100%;
  /* Both axes read from inherited custom properties, so focus-x and focus-y
     can be used together or on their own. */
  object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}

.fit-cover img {
  object-fit: cover;
}

/* Diagrams and plots carry their own margins; cropping them loses the subject. */
.fit-contain img {
  object-fit: contain;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-portrait {
  aspect-ratio: 3 / 4;
}
.aspect-tall {
  aspect-ratio: 2 / 3;
}
.aspect-landscape {
  aspect-ratio: 4 / 3;
}
.aspect-wide {
  aspect-ratio: 16 / 9;
}
.aspect-auto {
  aspect-ratio: auto;
}

/* Which part of the image survives the crop. */
.focus-x-0 {
  --focus-x: 0%;
}
.focus-x-5 {
  --focus-x: 5%;
}
.focus-x-10 {
  --focus-x: 10%;
}
.focus-x-15 {
  --focus-x: 15%;
}
.focus-x-20 {
  --focus-x: 20%;
}
.focus-x-25 {
  --focus-x: 25%;
}
.focus-x-30 {
  --focus-x: 30%;
}
.focus-x-35 {
  --focus-x: 35%;
}
.focus-x-40 {
  --focus-x: 40%;
}
.focus-x-45 {
  --focus-x: 45%;
}
.focus-x-50 {
  --focus-x: 50%;
}
.focus-x-55 {
  --focus-x: 55%;
}
.focus-x-60 {
  --focus-x: 60%;
}
.focus-x-65 {
  --focus-x: 65%;
}
.focus-x-70 {
  --focus-x: 70%;
}
.focus-x-75 {
  --focus-x: 75%;
}
.focus-x-80 {
  --focus-x: 80%;
}
.focus-x-85 {
  --focus-x: 85%;
}
.focus-x-90 {
  --focus-x: 90%;
}
.focus-x-95 {
  --focus-x: 95%;
}
.focus-x-100 {
  --focus-x: 100%;
}

.focus-y-0 {
  --focus-y: 0%;
}
.focus-y-5 {
  --focus-y: 5%;
}
.focus-y-10 {
  --focus-y: 10%;
}
.focus-y-15 {
  --focus-y: 15%;
}
.focus-y-20 {
  --focus-y: 20%;
}
.focus-y-25 {
  --focus-y: 25%;
}
.focus-y-30 {
  --focus-y: 30%;
}
.focus-y-35 {
  --focus-y: 35%;
}
.focus-y-40 {
  --focus-y: 40%;
}
.focus-y-45 {
  --focus-y: 45%;
}
.focus-y-50 {
  --focus-y: 50%;
}
.focus-y-55 {
  --focus-y: 55%;
}
.focus-y-60 {
  --focus-y: 60%;
}
.focus-y-65 {
  --focus-y: 65%;
}
.focus-y-70 {
  --focus-y: 70%;
}
.focus-y-75 {
  --focus-y: 75%;
}
.focus-y-80 {
  --focus-y: 80%;
}
.focus-y-85 {
  --focus-y: 85%;
}
.focus-y-90 {
  --focus-y: 90%;
}
.focus-y-95 {
  --focus-y: 95%;
}
.focus-y-100 {
  --focus-y: 100%;
}

/* Width, on screens wide enough for a side-by-side card. */
.card-image-w-80 {
  width: 80px;
}
.card-image-w-100 {
  width: 100px;
}
.card-image-w-120 {
  width: 120px;
}
.card-image-w-140 {
  width: 140px;
}
.card-image-w-160 {
  width: 160px;
}
.card-image-w-180 {
  width: 180px;
}
.card-image-w-200 {
  width: 200px;
}
.card-image-w-220 {
  width: 220px;
}
.card-image-w-240 {
  width: 240px;
}
.card-image-w-260 {
  width: 260px;
}
.card-image-w-280 {
  width: 280px;
}
.card-image-w-300 {
  width: 300px;
}
.card-image-w-320 {
  width: 320px;
}
.card-image-w-340 {
  width: 340px;
}
.card-image-w-360 {
  width: 360px;
}
.card-image-w-380 {
  width: 380px;
}
.card-image-w-400 {
  width: 400px;
}

@media (max-width: 34rem) {
  /* Stay beside the text rather than stacking: a full-width thumbnail of a
     tall image swamps the card and makes the list unscannable. */
  .card-image[class*="card-image-w-"] {
    width: 96px;
  }
}