/* Shared responsive layout for blog articles. */
.wrap{
  width:100%;
  padding-left:32px;
  padding-right:32px;
}

.article-layout{
  min-width:0;
}

.article-body,
.contact-tile,
.toc-sidebar{
  min-width:0;
}

.article-body img,
.article-body video,
.article-body table{
  max-width:100%;
}

.article-body table{
  display:block;
  overflow-x:auto;
}

@media(max-width:1100px){
  .article-layout{
    grid-template-columns:180px minmax(0, 1fr) 280px;
    gap:28px;
  }

  .article-head{
    max-width:100%;
    padding-left:32px;
    padding-right:32px;
  }
}

@media(max-width:900px){
  .article-layout{
    grid-template-columns:1fr;
    gap:36px;
  }

  .toc-sidebar,
  .contact-tile{
    position:static;
  }

  .article-head h1{
    font-size:clamp(34px, 6vw, 48px);
  }

  .cta-banner{
    grid-template-columns:1fr;
    padding:44px 40px;
  }
}

@media(max-width:640px){
  .wrap{
    padding-left:20px;
    padding-right:20px;
  }

  .article-head{
    padding:36px 20px;
  }

  .article-head h1{
    font-size:34px;
    line-height:1.15;
  }

  .article-head .sub{
    font-size:15px;
  }

  .article-layout{
    padding-top:40px;
    padding-bottom:40px;
  }

  .article-body p,
  .article-body ul li{
    font-size:15.5px;
    text-align:left;
  }

  .article-body h2{
    font-size:24px;
  }

  .stat-row,
  .related-grid{
    grid-template-columns:1fr;
  }

  .callout-box,
  .checklist-box{
    padding-left:20px;
    padding-right:20px;
  }

  .cta-banner{
    padding:36px 28px;
  }
}