@media (min-width: 971px) {
  .work-pics { grid-template-columns: 1fr 1fr;
               grid-template-areas: "p01 p01"
               "p02 p04"
               "p03 p03"
               ; }
  .pic-01 { grid-area: p01; }
  .pic-02 { grid-area: p02; }
  .pic-03 { grid-area: p03; }
  .pic-04 { grid-area: p04; }
  .work-pics figure > a { width: auto; }
  .work-pics img { margin-inline: auto ;  width:  min(90%, var(--photo-w), calc(var(--ph) * var(--photo-ratio))); }
    .pic-02 img { margin-right: 0; width: min(calc(90% - .8px), var(--photo-w)); }
  .pic-04 img { margin-left: 0;  width: min(calc(90% - .8px), var(--photo-w)); }
}
@media (max-width: 970px) {
  .work-pics { grid-template-columns: 1fr 1fr;
               grid-template-areas: "p01 p01"
               "p02 p04"
               "p03 p03"
               ; }
  .pic-01 { grid-area: p01; }
  .pic-02 { grid-area: p02; }
  .pic-03 { grid-area: p03; }
  .pic-04 { grid-area: p04; }
  .work-pics figure > a { width: auto; }
  .work-pics img { margin-inline: auto ;width: min(80%, var(--photo-w), calc(var(--ph) * var(--photo-ratio))); }
    .pic-02 img { margin-right: 0; width: min(calc(80% - 1.6px), var(--photo-w)); }
  .pic-04 img { margin-left: 0;  width: min(calc(80% - 1.6px), var(--photo-w)); }
}