@media (min-width: 971px) {
  .work-pics { grid-template-columns: 1fr 1fr;
               grid-template-areas: "p01 p01"
                                    "p02 p02"
                                    "p04 p05"
                                    "p06 p03"; }
  .pic-01 { grid-area: p01; }
  .pic-02 { grid-area: p02; }
  .pic-03 { grid-area: p03; }
  .pic-04 { grid-area: p04; }
  .pic-05 { grid-area: p05; }
  .pic-06 { grid-area: p06; }
  .work-pics figure > a { width: auto; }
  .work-pics img { width: min(100%, var(--photo-w)); }
  .work-pics :is(.pic-03, .pic-04, .pic-05, .pic-06) img { width: 100%; }
  .pic-03,.pic-04, .pic-05, .pic-06 { grid-area: p04, p05, p06, p03; justify-self: center; width: calc(50% - 8px); margin-top: 22px; }
  .pic-03 figcaption { margin-left: calc(-250% - 40px); margin-right: calc(-120.6% - 16.5px); text-align: right; }
}
@media (max-width: 970px){ .work-pics { grid-template-columns: 1fr 1fr;
               grid-template-areas: "p01 p01"
                                    "p02 p02"
                                    "p04 p05"
                                    "p06 p03"; }
  .pic-01 { grid-area: p01; }
  .pic-02 { grid-area: p02; }
  .pic-03 { grid-area: p03; }
  .pic-04 { grid-area: p04; }
  .pic-05 { grid-area: p05; }
  .pic-06 { grid-area: p06; }
  .work-pics figure > a { width: auto; }
  .work-pics img { width: min(100%, var(--photo-w)); }
  .work-pics :is(.pic-03, .pic-04, .pic-05, .pic-06) img { width: 100%; }
  .pic-03, .pic-04, .pic-05, .pic-06 { grid-area: p04, p05, p06, p03; justify-self: center; width: calc(100% - 8px); margin-top: 22px; }
  .pic-03 figcaption {   font-size: 12px;  margin-left: calc(-100% - 28px);  text-align: right; margin-right: -4px; } }