/* One accessible heading group shared by the desktop and phone layouts. */
.hero-layout { grid-template-rows: auto 1fr; column-gap:24px; row-gap:0; }
.portfolio-hero-heading { grid-column:2; grid-row:1; min-width:0; background:#151515; padding:30px 28px 24px; display:grid; gap:24px; }
.portfolio-hero-heading .hero-heading { margin:0; }
.hero-layout > .hero-gallery { grid-column:1; grid-row:1 / 3; }
.hero-layout > .hero-content { grid-column:2; grid-row:2; min-height:0; padding-top:0; }
@media(max-width:1180px) {
  .hero-layout { grid-template-rows:auto auto auto; row-gap:12px; }
  .portfolio-hero-heading { grid-column:1; grid-row:1; background:transparent; padding:10px 20px 0; gap:8px; }
  .hero-layout > .hero-gallery { grid-column:1; grid-row:2; }
  .hero-layout > .hero-content { grid-column:1; grid-row:3; padding-top:14px; }
}
@media(min-width:901px) and (max-width:1180px) and (orientation:landscape) {
  .hero-layout { grid-template-rows:auto 1fr; row-gap:0; column-gap:16px; }
  .portfolio-hero-heading { grid-column:2; grid-row:1; background:#151515; padding:16px 18px; gap:16px; }
  .hero-layout > .hero-gallery { grid-column:1; grid-row:1 / 3; }
  .hero-layout > .hero-content { grid-column:2; grid-row:2; min-height:0; padding-top:0; }
}