/* Photographic process steps; kept separate from shared content-page styles. */
.cp-process-pictures > .wrap { max-width: 1240px; }
.cp-process-pictures .cp-step-list > .cp-picture-step {
  grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.06fr);
  column-gap: clamp(20px, 2.8vw, 40px);
  align-items: start;
  padding-block: 10px 48px;
  margin-bottom: 48px;
}
.cp-process-pictures .cp-step-number { margin-top: 4px; }
.cp-process-pictures .cp-step-copy { min-width: 0; padding-top: 4px; }
.cp-process-pictures .cp-step-copy h2 { max-width: 390px; text-wrap: balance; }
.cp-process-pictures .cp-step-copy p { max-width: 425px; }
.cp-process-pictures .cp-process-picture { width: 100%; max-width: 480px; margin: 0; justify-self: end; }
.cp-process-pictures .cp-process-picture img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 21px;
  background: #f0f0f2;
  box-shadow: 0 1px 0 rgba(29, 29, 31, .05);
}
.cp-process-pictures .cp-process-picture figcaption {
  margin-top: 13px;
  padding-inline: 2px;
  font: 400 12px/1.6 var(--body);
  color: #60656a;
  text-wrap: balance;
}
html[lang="ar"] .cp-process-pictures .cp-process-picture figcaption { font-family: var(--ar); font-size: 14px; }
@media (min-width: 1100px) {
  .cp-process-pictures .cp-step-copy { padding-top: 12px; }
  .cp-process-pictures .cp-step-number { margin-top: 13px; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .cp-process-pictures .cp-step-list > .cp-picture-step { grid-template-columns: 32px minmax(0, 1fr) minmax(0, .95fr); gap: 22px; }
  .cp-process-pictures .cp-step-number { width: 32px; height: 32px; font-size: 14px; }
  .cp-process-pictures .cp-step-copy h2 { font-size: 24px; }
  .cp-process-pictures .cp-step-copy p { font-size: 14px; }
  .cp-process-pictures .cp-step-copy .cp-step-note { font-size: 12px; }
}
@media (max-width: 760px) {
  .cp-process-pictures .cp-step-list > .cp-picture-step {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 17px;
    row-gap: 25px;
    padding-block: 0 33px;
    margin-bottom: 34px;
  }
  .cp-process-pictures .cp-step-number { width: 32px; height: 32px; margin-top: 1px; font-size: 14px; }
  .cp-process-pictures .cp-step-copy { padding: 0; }
  .cp-process-pictures .cp-step-copy h2 { margin-top: 1px; max-width: none; }
  .cp-process-pictures .cp-step-copy p { max-width: none; }
  .cp-process-pictures .cp-process-picture { grid-column: 1 / -1; max-width: none; }
  .cp-process-pictures .cp-process-picture img { border-radius: 18px; }
  .cp-process-pictures .cp-process-picture figcaption { font-size: 12px; margin-top: 11px; }
}
@media (max-width: 350px) {
  .cp-process-pictures .cp-step-list > .cp-picture-step { grid-template-columns: 28px minmax(0, 1fr); column-gap: 13px; row-gap: 23px; }
  .cp-process-pictures .cp-step-number { width: 28px; height: 28px; font-size: 13px; }
  .cp-process-pictures .cp-step-copy h2 { font-size: 22px; }
  .cp-process-pictures .cp-process-picture img { border-radius: 15px; }
}