/* About page: layout rules the home stylesheet does not have.
   Loaded after styles.css. The home page never loads this file. */
@media (max-width:1180px){
  [data-grid="process"]{grid-template-columns:1fr 1fr!important}
  [data-grid="values"]{grid-template-columns:1fr 1fr!important}
}
@media (max-width:900px){
  [data-split]{grid-template-columns:1fr!important;gap:34px!important}
  [data-split] > div:last-child{justify-self:start!important}
  [data-grid="process"],[data-grid="values"]{grid-template-columns:1fr!important}
  [data-grid="stats"]{grid-template-columns:1fr 1fr!important}
  [data-grid="stats"] > div{border-right:0!important;padding:28px 0 0!important}
}

/* stacked layout: portrait sits under the story text, above the quote */
@media (max-width:900px){
  [data-split] > div:first-child{display:contents}
  [data-split] > div:first-child > span{justify-self:start}
  [data-split] [data-portrait]{order:1;justify-self:start!important;margin-top:8px}
  [data-split] [data-quote]{order:2;margin-top:0!important}
}

/* tablet and phone: portrait right under the Meet Wilhelm Rosenthal heading */
@media (max-width:900px){
  [data-split] > div:first-child > span{order:0}
  [data-split] > div:first-child > h2{order:1}
  [data-split] [data-portrait]{order:2;margin-top:0}
  [data-split] > div:first-child > p{order:3}
  [data-split] [data-quote]{order:4}
}