@media (min-width: 971px) {
  .work-pics { grid-template-columns: 1fr 1fr;
               grid-template-areas: "p00 p00"
                                    "p02 p01"
                                    "p02 p04"
                                    "p03 p05"; }
  .pic-00 { grid-area: p00; }
  .pic-02 { grid-area: p02; align-self: start; }
  .pic-03 { grid-area: p03; align-self: start; }
  .pic-01 { grid-area: p01; }
  .pic-04 { grid-area: p04; }
  .pic-05 { grid-area: p05; }
  .work-pics figure > a { width: auto; }
  .work-pics img { width: min(100%, var(--photo-w)); }
  .pic-01 img, .pic-04 img, .pic-05 img { margin-left: auto; width: min(85%, var(--photo-w)); }
  .pic-01 figcaption, .pic-04 figcaption, .pic-05 figcaption { margin-left: 15%; }
  .pic-01 figcaption { display: none; }
  .pic-00 img { margin-inline: auto; width: min(100%, var(--photo-w), calc(var(--ph) * var(--photo-ratio))); }
}
@media (max-width: 970px) {
  .work-pics { grid-template-columns: 1fr 1fr;
               grid-template-areas: "p00 p00"
                                    "p02 p01"
                                    "p02 p04"
                                    "p03 p05"; }
  .pic-00 { grid-area: p00; }
  .pic-02 { grid-area: p02; align-self: start; }
  .pic-03 { grid-area: p03; align-self: start; }
  .pic-01 { grid-area: p01; }
  .pic-04 { grid-area: p04; }
  .pic-05 { grid-area: p05; }
  .work-pics figure > a { width: auto; }
  .work-pics img { width: min(100%, var(--photo-w)); }
  .pic-01 img, .pic-04 img, .pic-05 img { margin-left: auto; width: min(85%, var(--photo-w)); }
  .pic-01 figcaption, .pic-04 figcaption, .pic-05 figcaption { margin-left: 15%; }
  .pic-01 figcaption { display: none; }
  .pic-00 img { margin-inline: auto; width: min(100%, var(--photo-w), calc(var(--ph) * var(--photo-ratio))); }
}