/*
 * CType "rowpic" (ct-1-3rows row, Figma node 4381:33013 right column): square image left, text right.
 * Image is 219px (1:1, crop variant "default") from tablet up, in rem so it follows the root font size;
 * below tablet it is full width 16:9 (crop variant "mobile"), Figma node 2322:15278.
 */
/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is
below $min-width,
$size-at-max-width when page width is above $max-width,
and linearly scales between the two between $min-width and $max-width*/
/*
 * ".rowpic--wide" = big left column of ct-1-3rows (Figma 4381:33013 left): image on top, 16:9 at every
 * width (crop variant "mobile"), text below.
 */
@layer molecules {
  .rowpic {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gutter-default);
  }
  @media (min-width: 640px) {
    .rowpic {
      flex-direction: row;
      gap: var(--gap-l);
      align-items: flex-start;
    }
  }
  .rowpic > picture {
    display: block;
  }
  @media (min-width: 640px) {
    .rowpic > picture {
      flex: 0 1 13.7rem;
      min-inline-size: 0;
    }
  }
  .rowpic__image {
    aspect-ratio: 16/9;
    border-radius: var(--border-radius-default);
    display: block;
    inline-size: 100%;
    object-fit: cover;
  }
  @media (min-width: 640px) {
    .rowpic__image {
      aspect-ratio: 1;
    }
  }
  /* Text never gets narrower than it is at 1200px (right column 560px - image 219px - gap): below that
     the image shrinks instead (flex-shrink above). */
  .rowpic__body {
    flex: 1;
    min-inline-size: 0;
  }
  @media (min-width: 640px) {
    .rowpic__body {
      flex: 1 0 19.8rem;
    }
  }
  .rowpic__body > :last-child {
    margin-block-end: 0;
  }
  .rowpic--wide {
    flex-direction: column;
    gap: var(--gap-l);
  }
  .rowpic--wide > picture {
    flex: none;
  }
  .rowpic--wide .rowpic__image {
    aspect-ratio: 16/9;
    inline-size: 100%;
  }
  .rowpic--wide .rowpic__body {
    flex: 1;
  }
}