/* Mobile layout: <=767px */
@media (max-width: 767px){
  .container,
  .content-wrap{
    width: 100%;
    max-width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }

  .home-grid,
  .detail-grid,
  .popular-page-grid,
  .category-layout,
  .archive-layout{
    display: block;
  }

  .sidebar,
  .detail-sidebar{
    width: 100%;
    margin-top: 22px;
  }

  .headline-slider{
    min-height: 260px;
  }

  .photo-grid,
  .highlight-grid,
  .editor-grid,
  .related-grid,
  .category-grid,
  .archive-grid,
  .search-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  img,
  iframe{
    max-width: 100%;
    height: auto;
  }
}