/* ==========================================================================
   Graphic design page — styles nothing else uses.
   Print pieces come in many shapes, so images keep their own proportions.
   ========================================================================== */

/* one work category: a red label over a 4px rule, then its entries */
.work-group__title{
  padding-bottom:10px;
  border-bottom:4px solid var(--accent);
  color:var(--accent);
}
.work-group .entry{border-top:0;border-bottom:1px solid var(--rule);}
@media (min-width:1024px){
  .work-group .entry{padding:24px 0;}
  .work-group + .work-group{margin-top:32px;}
}

/* images under a work item: two across; one alone stays narrow; three across */
.pieces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:8px;}
.pieces--1{grid-template-columns:minmax(0,280px);}
.pieces--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.piece img{width:100%;}
@media (min-width:1024px){.pieces{gap:12px;}}

/* a logo on a white panel, stretched to its neighbor's height */
.pieces:has(.piece--panel){align-items:stretch;}
.piece--panel img{flex:1;object-fit:contain;padding:6%;background:var(--c-white);}

/* case study: cover and flat layout at the same height
   (columns in proportion to each image's width-to-height ratio) */
.pieces--case{grid-template-columns:1fr;gap:16px;}
@media (min-width:600px){.pieces--case{grid-template-columns:1.48fr 1.94fr;}}

/* ways to work together: three bordered cards */
.ways{display:grid;gap:12px;}
.way{
  display:flex;
  flex-direction:column;
  gap:12px;
  border:2px solid var(--fg);
  padding:18px;
}
.way__num{color:var(--accent);}
.way__title{font-size:var(--fs-h3-lg);letter-spacing:var(--ls-h3);}
.way__link{display:flex;align-items:center;min-height:var(--tap);margin-top:auto;color:var(--accent);}
@media (min-width:1024px){
  .ways{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
  .way{min-height:200px;padding:24px;}
}