@media (min-width: 971px) {
  .work-pics { grid-template-columns: repeat(4, minmax(0, 1fr));
               grid-template-areas: "p01 p01 p01 p01"
                                    "p02 p02 p03 p03"
                                    "p06 p07 p03 p03"
                                    "p04 p04 p05 p05"; }
  .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; }
  .pic-07 { grid-area: p07; }
  .work-pics figure.pic-05 { margin-top: calc(-64.233% - 2.4px); }
}
@media (max-width: 970px) {
  .work-pics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-pics figure { grid-column: 1 / -1; }
  .work-pics figure.pic-06, .work-pics figure.pic-07 { grid-column: auto; }
}