/*
 * The picture on a solution page (/solutions/<key>/), beside "How ALFIDAONE helps". Landscape 4:3, no lettering inside (the page text is HTML, so English and
 * Arabic share the files). Phone / tablet: on top, full width. From 900px: a fixed 400px column at the start of the row (left in English, right in Arabic).
 */
.sol-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.sol-main { min-inline-size: 0; }
.sol-pic { margin: 0; inline-size: 100%; max-inline-size: 520px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px; background: #dfe8f5; box-shadow: 0 2px 4px rgba(11, 31, 68, .08), 0 14px 30px rgba(11, 31, 68, .16); }
.sol-pic img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .has-sol-pic .sol-layout { grid-template-columns: 400px minmax(0, 1fr); gap: 32px; }
  .has-sol-pic .sol-pic { max-inline-size: none; position: sticky; inset-block-start: 96px; }
}