@media(min-width:751px){
  /* The right-hand description defines this row's height.  That lets the
     title meet its top edge and the metadata meet its bottom edge. */
  .case-intro{min-height:0;align-items:stretch}
  .case-left{grid-column:1;grid-row:1;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}
  .case-title{grid-column:auto;grid-row:auto;align-self:flex-start}
  .case-intro dl{grid-column:auto;grid-row:auto;align-self:flex-start;margin:0;padding:0}
  .case-intro.has-no-description .case-left{justify-content:flex-start;gap:13px}
  /* The row takes the height of its taller column. Bottom alignment therefore
     gives both desired states without a breakpoint: top-aligned when the
     description is taller, bottom-aligned when the left column is taller. */
  .case-description{grid-column:2;grid-row:1;align-self:end;margin:0}
}
@media(max-width:750px){
  .case-left{display:block}
  .case-intro dl{margin:42px 0 50px}
  .case-description{align-self:auto}
}