/* The copy shares a safe rectangle inside each polygon, in card coordinates.
   Container units keep type, spacing and icons proportional in both axes. */
.card-copy { display: contents; }

@media (min-width: 1000px) {
  .cards .card { container-type: size; }
  .cards .card.s1 { --copy-x: 18%; --copy-y: 22%; --copy-w: 65%; --copy-h: 60%; --glyph-x: 4%; --glyph-y: 49%; }
  .cards .card.s2 { --copy-x: 18%; --copy-y: 26%; --copy-w: 69%; --copy-h: 66%; --glyph-x: 4%; --glyph-y: 46%; }
  .cards .card.s3 { --copy-x: 25%; --copy-y: 28%; --copy-w: 58%; --copy-h: 65%; --glyph-x: 31%; --glyph-y: 8%; }
  .cards .card.s4 { --copy-x: 23%; --copy-y: 27%; --copy-w: 53%; --copy-h: 65%; --glyph-x: 49%; --glyph-y: 6%; }
  .cards .card.s5 { --copy-x: 19%; --copy-y: 28%; --copy-w: 73%; --copy-h: 55.8%; --glyph-x: 82%; --glyph-y: 48%; }
  .cards .card.s6 { --copy-x: 15%; --copy-y: 28%; --copy-w: 64%; --copy-h: 69%; --glyph-x: 82%; --glyph-y: 47%; }

  .cards .card .card-content {
    position: absolute !important;
    left: var(--copy-x);
    top: var(--copy-y);
    width: var(--copy-w);
    height: var(--copy-h);
    padding: 0 !important;
    min-width: 0;
    min-height: 0;
    align-items: center !important;
    justify-content: center;
    font-size: min(4cqw, 7cqh);
  }
  .cards .card:is(.s3, .s4) .card-content { font-size: min(6cqw, 5.4cqh); }
  .cards .card .card-copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: none;
    width: 100%;
    min-width: 0;
    gap: 0.35em;
    overflow-wrap: anywhere;
  }
  .cards .card .card-title {
    font-size: 1.4em;
    line-height: 1.15;
    margin: 0;
  }
  .cards .card.s1 .card-title {
    width: fit-content;
    max-width: 70%;
    min-height: 10.7cqh;
    margin-left: 0;
    margin-right: auto;
    justify-self: left;
  }
  #agCardInstant .card-title { margin: 0; }
  .cards .card .card-text {
    max-width: none;
    font-size: 1em;
    line-height: 1.35;
    margin: 0;
  }
  .cards .card .card-list { margin: 0 !important; padding: 0; }
  .cards .card .card-list li {
    font-size: 0.95em;
    line-height: 1.3;
    align-items: flex-start;
    margin-bottom: 0.3em;
  }
  .cards .card .card-list li:last-child { margin-bottom: 0; }
  .cards .card .card-list li::before {
    width: 0.3em;
    height: 0.3em;
    flex: 0 0 0.3em;
    margin: 0.5em 0.55em 0;
  }
  .cards .card .card-badge,
  .cards .card .card-info-btn {
    position: static !important;
    align-self: flex-end;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0.5em 0.75em !important;
    font-size: 0.85em !important;
    line-height: 1.2;
    letter-spacing: 0.06em !important;
    white-space: normal;
    text-align: center;
  }
  .cards .card .card-icon {
    top: var(--glyph-y) !important;
    left: var(--glyph-x) !important;
    right: auto !important;
    width: min(13cqw, 28cqh);
    height: min(13cqw, 28cqh);
  }
  .cards .card:is(.s3, .s4) .card-icon {
    width: min(22cqw, 18cqh);
    height: min(22cqw, 18cqh);
  }
  .cards .card:is(.s1, .s2, .s5, .s6) .card-content {
    font-size: min(1.35vw, 1.85vh);
  }
  .cards .card:is(.s1, .s2, .s5, .s6) .card-copy { gap: 0.2em; }
  .cards .card:is(.s1, .s2, .s5, .s6) .card-text { line-height: 1.25; }
  .cards .card:is(.s1, .s2, .s5, .s6) .card-list li {
    font-size: 1em;
    line-height: 1.2;
    margin-bottom: 0.1em;
  }
  /* The action sits below the icon in the wide end of the polygon, leaving
     the whole text column available at the same type scale as the centre. */
  .cards .card.s1 .card-badge,
  .cards .card.s2 .card-info-btn {
    position: absolute !important;
    left: -16cqw;
    top: 57cqh;
    right: auto !important;
    bottom: auto !important;
    width: 16cqw;
    padding: 0.3em !important;
    font-size: min(2cqw, 4.4cqh) !important;
  }
  .cards .card.s2 .card-info-btn { top: 50cqh; }
  #agCardInstant .card-title {
    position: relative;
    left: 9cqw;
    width: 64cqw;
    max-width: none;
    min-height: 6cqh;
    margin: 0;
  }
  #agCardInstant .card-title { margin-left: 0; margin-right: auto; }
  .cards .card.s5 .card-text { width: 60cqw; margin-right: auto; margin-left: 0; }
  .cards .card.s5 .card-list { width: 49cqw; margin-left: 11cqw !important; margin-right: auto !important; }
}