/* Falcon 6048's AI Workloads section (product_scroll.blade.php): an introduction under the
   section title, then two workloads side by side, each an illustration over its title and
   description, laid out like the Benefits row. Sized on the Falcon type scale
   (falcon-type.css). */
#ai-workloads .ai-workloads-intro {
  max-width: 820px;
  margin: 0 auto 3rem;
  text-align: center; }
  #ai-workloads .ai-workloads-intro h3 {
    margin: 0 0 16px;
    color: #1a2332;
    font-size: var(--type-subhead);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading);
    letter-spacing: 0; }
  #ai-workloads .ai-workloads-intro p {
    margin: 0;
    color: #555;
    font-size: var(--type-lead);
    line-height: var(--leading-lead); }

#ai-workloads .ai-workloads-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem clamp(40px, 6vw, 96px);
  margin: 0;
  padding: 0;
  list-style: none; }
  #ai-workloads .ai-workloads-grid > li { text-align: center; }
  /* Each illustration sits in the same square box as a Benefits icon on this page: one of
     that row's three columns (product.css: three columns, a 3rem gap; one column at 768px
     and below), worked out from this section's width, which is the same measure. Inside it
     each SVG's viewBox holds the drawing at the Benefits icons' size: 167 of 352 tall, or
     at most 329 of 352 wide, which is what these wide drawings reach first. */
  #ai-workloads .w1366 { container-type: inline-size; }
  #ai-workloads .ai-workloads-grid { --ai-icon: calc((100cqi - 6rem) / 3); }
  /* The box shows only the middle of the square, 22% to 78% of its height (25:14), as the
     Benefits icons do (product.css): the drawings sit inside that band, so only empty space
     above and below is cut. */
  #ai-workloads .ai-workloads-grid figure {
    display: flex;
    align-items: center;
    width: var(--ai-icon);
    max-width: 100%;
    aspect-ratio: 25 / 14;
    margin: 0 auto 1.5rem;
    overflow: hidden; }
    #ai-workloads .ai-workloads-grid img { display: block; flex-shrink: 0; width: 100%; height: auto; max-height: none; aspect-ratio: 1 / 1; object-fit: contain; }
  #ai-workloads .ai-workloads-grid h4 {
    margin: 0 0 12px;
    color: #1a2332;
    font-size: var(--type-component);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading);
    letter-spacing: 0; }
  /* The description keeps to its drawing's left and right edges: 329 of the box's 352,
     centred, as the drawing is (see above), or the share an item sets in --ai-art when its
     drawing is sized by height instead. */
  #ai-workloads .ai-workloads-grid p {
    max-width: calc(var(--ai-icon) * var(--ai-art, 0.9347));
    margin: 0 auto;
    color: #4a5560;
    font-size: var(--type-body);
    line-height: var(--leading-body); }

@media screen and (max-width: 768px) {
  #ai-workloads .ai-workloads-grid { --ai-icon: 100%; grid-template-columns: 1fr; } }