/* Shared responsive overrides for page layout classes; load after each page's own styles. */
@media (max-width:1024px){.styles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .styles{grid-template-columns:minmax(0,1fr)}
  .style{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;row-gap:6px;padding:16px}
  .style-img{grid-row:1 / span 2;aspect-ratio:1;margin:0;border:1px solid #DDD7CB;align-self:start}
  .style-img img{width:84%}
  .style-top{align-items:flex-start}
  .style h3{font-size:18px}
  .style p{font-size:14px}
  .mat-img{aspect-ratio:16/9}
  .mat-img img{width:56%}
  .sec,.stats,.cta,.ft,.crumbs,.hero{padding-left:20px;padding-right:20px}
  .hero-btns{max-width:320px}
  .hero-btns,.cta-btns{flex-direction:column;align-items:stretch;width:100%}
}