@media (min-width: 901px) {
  .work-pics { grid-template-columns: 1fr 1fr 1fr;
               column-gap: 10px; row-gap: 10px;
               grid-template-rows: auto auto 1fr;
               grid-template-areas: "p00 p00 p04"
                                    "p00 p00 p03"
                                    "p00 p00 p02"; }
  .pic-00 { grid-area: p00; }
  .pic-02 { grid-area: p04; }
  .pic-03 { grid-area: p03; }
  .pic-04 { grid-area: p02; }
  .work-pics { width: 80%; }
  .work-pics figure > a { width: auto; }
  .work-pics .pic-00 img { width: min(80%, var(--photo-w)); margin-inline: auto; }
  .work-pics .pic-03 img { width: min(100%, var(--photo-w)); }
  .work-pics .pic-02 img { width: min(100%, var(--photo-w)); }
  .work-pics .pic-04 img { width: min(100%, var(--photo-w)); }
}
@media (max-width: 900px) {
  .work-pics { grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 10px;
               grid-template-rows: auto auto 1fr;
               grid-template-areas: "a00 a00"
                                    "a02 a03"
                                    "a04 a03"; }
  .pic-00 { grid-area: a00; }
  .pic-02 { grid-area: a02; }
  .pic-03 { grid-area: a03; }
  .pic-04 { grid-area: a04; }
  .work-pics figure > a { width: auto; }
  .work-pics img { width: min(100%, var(--photo-w), calc(var(--ph) * var(--photo-ratio))); }
.work-pics .pic-00 img { width: min(80%, var(--photo-w), calc(var(--ph) * var(--photo-ratio))); margin-inline: auto; }}
.pic-04 figcaption { font-family: var(--font-latin); font-size: 12px; }