:root{
  --container-w: 1120px;
  --green:#19a75a;
  //--green-2:#0f8e4a;
  --text:#333;
  --muted:#8c8c8c;
  --border:#e8e8e8;
  --bg:#f5f6f7;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:#333;
  color:var(--text);
  background:#fff;
}

a{color:inherit;text-decoration:none;}
a:hover{color:#ffffff;}
a:hover{color:var(--green-2);}

.container{width:1120px;margin:0 auto;}
.container{width:var(--container-w);margin:0 auto;}

.site-header{
  width: 100%;
  position:relative;
}
.site-header .banner{
  position:relative;
  z-index:1;
  height:360px;
  background:url("../images/dbhft2.jpg") center/cover no-repeat;
  overflow:hidden;
}
.site-header .banner-inner{position:absolute;left:0;right:0;top:18px;}

.brand{
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:column;
  flex-direction:column;
  -ms-flex-align:center;
  align-items:center;
  gap:10px;
}
/* IE：无 gap 时用 margin 模拟 */
.brand .logo{margin-bottom:10px;}
.brand .brand-title{margin-bottom:10px;}
.brand .searchbar{margin-top:10px;}

.logo{
  width:100px;
  height:100px;
  min-width:100px;
  min-height:100px;
  border-radius:50%;
  overflow:hidden;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
  align-items:center;
  -ms-flex-pack:center;
  justify-content:center;
  /* 防止在 Flex 下被压缩导致变椭圆（特别是 IE 模式） */
  -ms-flex:0 0 100px;
  flex:0 0 100px;
}

.logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.brand-title{
  font-size:26px;
  font-weight:800;
  color:#19a75a;
  color:var(--green);
  background:transparent;
  border:0;
  padding:0;
  /* 用浅色描边模拟文字边框 #EAFFF4 */
  text-shadow:
    -1px 0 #eafff4,
    1px 0 #eafff4,
    0 -1px #eafff4,
    0 1px #eafff4;
}

.searchbar{
  margin-top:10px;
  width:520px;
  display:-ms-flexbox;
  display:flex;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.searchbar input{
  -ms-flex:1;
  flex:1;
  border:0;
  outline:none;
  padding:12px 12px;
  background:rgba(255,255,255,.85);
}
.searchbar button{
  width:110px;
  border:0;
  background:#19a75a;
  background:var(--green);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.searchbar button:hover{background:#0f8e4a;}
.searchbar button:hover{background:#0f8e4a;;}

.navbar{
  margin-top: -40px;
  height:40px;
  position:relative;
  z-index:20;
}

.navbar .container{
  max-width:1120px;
  max-width:var(--container-w);
  height:100%;
  background:#19a75a;
  background:var(--green);
  border-radius: 12px 12px 0 0;
}

.nav{
  width: 100%;
  margin:0;
  padding:0;
  list-style:none;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
  align-items:center;
  height:100%;
}

.nav li{
  -ms-flex:1;
  flex:1;
  display:-ms-flexbox;
  display:flex;
}

.nav a{
  height:40px;
  width:100%;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
  align-items:center;
  -ms-flex-pack:center;
  justify-content:center;
  gap:4px;
  padding:0 22px;
  color:#fff;
  font-size:14px;
}

.nav a[data-nav][href="index.html"]::before{
  content:"";
  width:18px;
  height:18px;
  background:url("../images/indexpic.png") center/contain no-repeat;
}

.nav a.active,
.nav a:hover{
  background:rgba(0,0,0,.14);
}

.main{
  background:#f5f6f7;
  background:var(--bg);
  padding:14px 0 26px;
}

.breadcrumb{
  font-size:12px;
  color:#7d7d7d;
  padding:10px 0 12px;
}

.content-shell{
  padding:18px;
}

/* IE/旧浏览器：float 回退（无 Grid 时生效） */
.two-col{
  display:block;
}
.two-col::after{content:"";display:table;clear:both;}
.two-col .side{
  float:left;
  width:260px;
  margin-right:18px;
  box-sizing:border-box;
}
.two-col .panel,
.two-col section.panel{
  overflow:hidden;
}
@supports (display:grid){
  .two-col{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:18px;
  }
  .two-col .side{
    float:none;
    width:auto;
    margin-right:0;
  }
}

.side{
  border:1px solid #e8e8e8;
  border:1px solid var(--border);
  border-top-right-radius:26px;
  background:#fff;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:column;
  flex-direction:column;
  min-height:100%;
}

.side-head{
  height:44px;
  background:#19a75a;
  background:var(--green);
  color:#fff;
  font-weight:700;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
  align-items:center;
  padding:0 14px;
  border-top-right-radius:26px;
}

.side-menu{list-style:none;margin:0;padding:6px 0;}
.side-menu a{
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  font-size:13px;
  color:#2e2e2e;
}
.side-menu a .dot{
  margin-right:8px;
  width:0;height:0;
  border-left:7px solid #19a75a;
  border-left:7px solid var(--green);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  opacity:.8;
}
.side-menu a.active{color:#0f8e4a;font-weight:700;}
.side-menu a.active{color:var(--green-2);font-weight:700;}
.side-menu a.active .dot{opacity:1;}

.side-block{
  margin:0 12px 12px;
  margin-top:20px;
  border:1px solid #e8e8e8;
  border:1px solid var(--border);
}
.side-block .block-title{
  background:#19a75a;
  background:var(--green);
  color:#fff;
  height:34px;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
  align-items:center;
  padding:0 12px;
  font-weight:700;
  font-size:13px;
}

.side-block .block-body{
  padding:10px 12px 12px;
  font-size:12px;
  color:#4c4c4c;
  line-height:1.8;
}

.qr{
  margin:10px auto 0 auto;
  width:120px;
  height:120px;
  background:#fff;
  border:1px dashed #cfcfcf;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
  align-items:center;
  -ms-flex-pack:center;
  justify-content:center;
  color:#a0a0a0;
  font-size:12px;
}

.qr img{
  max-width:100%;
  max-height:100%;
  display:block;
}

.panel-head{
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid #e8e8e8;
  border-bottom:1px solid var(--border);
}
.panel-head .panel-title{margin-right:10px;}

.panel-tabs{
  margin-left:10px;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
  align-items:center;
  gap:18px;
}
.panel-tabs .panel-tab{margin-right:18px;}
.panel-tabs .panel-tab:last-child{margin-right:0;}

.panel-tab{
  font-size:12px;
  color:#5b5b5b;
  padding:4px 0;
  border-bottom:2px solid transparent;
  cursor:pointer;
}

.panel-tab.active{
  color:#0f8e4a;
  color:var(--green-2);
  font-weight:800;
  border-bottom-color:#19a75a;
  border-bottom-color:var(--green);
}

.panel-title{
  font-size:16px;
  font-weight:800;
  color:#0f8e4a;
  color:var(--green-2);
}

.panel-subtitle{
  margin-top:4px;
  font-size:13px;
  color:#666;
  line-height:1.7;
}

/* 首页头条区域：更突出的主标题与导语 */
.home-hero .panel-title{
  font-size:22px;
  letter-spacing:1px;
}
.home-hero .panel-subtitle--hero{
  margin-top:8px;
  font-size:14px;
  color:#555;
  line-height:1.8;
}

.list{
  list-style:none;
  margin:0;
  margin-top:10px;
  padding:0;
}

/* IE：列表项 float 回退 */
.list li{
  display:block;
  overflow:hidden;
  padding:10px 14px;
  border-bottom:1px dashed #eee;
  font-size:13px;
}
.list li .title{
  float:left;
  max-width:75%;
  margin-right:12px;
}
.list li .date{
  float:right;
  width:110px;
  text-align:right;
  white-space:nowrap;
}
@supports (display:grid){
  .list li{
    display:grid;
    grid-template-columns:1fr 110px;
    gap:12px;
  }
  .list li .title{
    float:none;
    max-width:none;
    margin-right:0;
  }
  .list li .date{
    float:none;
    width:auto;
  }
}

.list li:last-child{border-bottom:0;}

.list .title{
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
  align-items:center;
  gap:8px;
  color:#2a2a2a;
  margin-right:8px;
}

.list .title::before{
  content:"";
  width:0;height:0;
  border-left:6px solid #8aa0a6;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  opacity:.9;
}

.list .date{color:#9a9a9a;font-size:12px;text-align:right;}

.pager{
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
  align-items:center;
  gap:10px;
  padding:14px;
  border-top:1px solid #e8e8e8;
  border-top:1px solid var(--border);
  color:#666;
  font-size:12px;
}

.pager .spacer{-ms-flex:1;flex:1;}
.pager > *{margin-right:10px;}
.pager > *:last-child{margin-right:0;}
.page-btns .page-btn:last-child{margin-right:0;}

.pager select,.pager input{
  border:1px solid #e8e8e8;
  border:1px solid var(--border);
  height:28px;
  padding:0 8px;
  border-radius:3px;
  outline:none;
}

.page-btns{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:6px;}
.page-btn{
  min-width:28px;
  height:28px;
  border:1px solid #e8e8e8;
  border:1px solid var(--border);
  background:#fff;
  border-radius:3px;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
  align-items:center;
  -ms-flex-pack:center;
  justify-content:center;
  cursor:pointer;
  padding:0 8px;
}
.page-btn.active{background:#e9f7f0;border-color:#bfe6d1;color:#0f8e4a;font-weight:800;}
.page-btn.active{color:var(--green-2);}
.page-btn:hover{border-color:#cfe9dc;}
.page-btn.disabled{opacity:.5;cursor:not-allowed;}

.article{
  padding:16px 14px 20px;
}

.article h1{
  margin:0;
  font-size:18px;
  text-align:center;
}

.article .meta{
  margin-top:10px;
  text-align:center;
  color:#9a9a9a;
  font-size:12px;
}

.article .body{
  margin-top:14px;
  color:#3a3a3a;
  font-size:13px;
  line-height:1.9;
}

.ph-img{
  width:100%;
  color:#a0a0a0;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
  align-items:center;
  -ms-flex-pack:center;
  justify-content:center;
  font-size:0;
  overflow:hidden;
}

.ph-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* IE/旧浏览器：16:9 用 padding-bottom 实现固定比例（56.25% = 9/16） */
.ph-16x9{
  position:relative;
  width:100%;
  height:0;
  padding-bottom:56.25%;
  overflow:hidden;
  background:#fff;
}
.ph-16x9 img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ph-4x3{min-height:150px;}
@supports (aspect-ratio: 1) {
  .ph-16x9{
    height:auto;
    padding-bottom:0;
    aspect-ratio:16/9;
  }
  .ph-16x9 img{
    position:static;
  }
  .panel-focus .ph-img.ph-16x9{
    height:auto;
  }
  .ph-4x3{min-height:0;aspect-ratio:4/3;}
}

/* 非首页顶部的 顶部横幅图 等：宽高自适应，不做 widthFix，IE 下也按比例显示 */
.ph-img--fluid{
  min-height:0;
}
.ph-img--fluid img{
  width:100%;
  height:auto;
  object-fit:none;
  display:block;
}
@supports (aspect-ratio: 1) {
  .ph-img--fluid{aspect-ratio:auto;}
}

.article-nav{
  display:-ms-flexbox;
  display:flex;
  -ms-flex-pack:justify;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-top:1px solid #e8e8e8;
  border-top:1px solid var(--border);
  color:#6b6b6b;
  font-size:12px;
}
.article-nav a:first-child{margin-right:12px;}

/* IE：卡片网格 float 回退 */
.grid{
  padding:14px;
  display:block;
  overflow:hidden;
}
.grid .card{
  float:left;
  width:31%;
  margin-right:2%;
  margin-bottom:22px;
  box-sizing:border-box;
}
.grid .card:nth-child(3n){
  margin-right:0;
}
/* IE：4 列用 class 控制，保证一行 4 个且宽度填满 */
.grid.grid--4col .card{
  width:23.5%;
  margin-right:2%;
  box-sizing:border-box;
}
.grid.grid--4col .card:nth-child(3n){
  margin-right:2%;
}
.grid.grid--4col .card:nth-child(4n){
  margin-right:0;
}
@supports (display:grid){
  .grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  .grid .card{
    float:none;
    width:auto;
    margin-right:0;
    margin-bottom:0;
  }
  .grid.grid--4col .card{
    width:auto;
  }
  .grid.grid--4col{
    grid-template-columns:repeat(4,1fr);
  }
}

.card{
  text-align:center;
}

.card .ph-img{width:100%;}

.card .cap{
  margin-top:8px;
  font-size:12px;
  color:#6a6a6a;
}

.home-wrap{
  /* 第一层：顶部横向背景图，宽度铺满，高度自适应 */
  /* 第二层：从图片高度结束位置开始向下填充浅绿色背景 */
  background:
    url('../images/toutiao.png') top center / 100% auto no-repeat,
    linear-gradient(to bottom, transparent 0, transparent 126px, #fffffc 126px, #fffdfc 100%);  
}

.home-hero{
  padding:18px 0 12px;
  position:relative;
}

.home-hero .container{position:relative;}

/* 首页头图轮播 */
.hero-slider{
  position:relative;
}
.hero-slide{display:none;}
.hero-slide.active{display:block;}

.hero-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:8px 12px;
  font-size:12px;
  color:#fff;
  background:rgba(0,0,0,.45);
}

.hero-dots{
  position:absolute;
  right:12px;
  bottom:12px;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
  align-items:center;
}
.hero-dot{
  display:inline-block;
  width:8px;
  height:8px;
  margin:0 3px;
  border-radius:999px;
  background:rgba(0,0,0,.25);
  cursor:pointer;
}
.hero-dot.active{
  background:#fff;
}

/* IE：首页顶部两栏 float 回退 */
.home-top{
  display:block;
}
.home-top > *:first-child{
  float:left;
  width:58%;
  margin-right:18px;
  box-sizing:border-box;
}
.home-top > *:last-child{
  overflow:hidden;
}
@supports (display:grid){
  .home-top{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:18px;
    align-items:stretch;
  }
  .home-top > *:first-child,
  .home-top > *:last-child{
    float:none;
    width:auto;
    margin-right:0;
  }
}

/* 首页右侧协会 tab 内容区：与左侧轮播等高(362px)，仅此区域可滚动 */
.home-top > .panel > .tab-panels{
  max-height:330px; /* 362 - tabs 约 36px */
  overflow-y:auto;
}

.tabs{
  display:-ms-flexbox;
  display:flex;
  gap:10px;
}
.tabs .tab{margin-right:10px;}
.tabs .tab:last-child{margin-right:0;}

.tab{
  font-size:14px;
  padding:8px 10px;
  //background:#fff;
  cursor:pointer;
}

.tab.active{
  background:#19a75a;
  background:var(--green);
  border-color:#19a75a;
  border-color:var(--green);
  color:#fff;
  font-weight:800;
}

/* Tab 内容面板：仅 .active 显示，与 data-tab-group 搭配 */
[data-tab-panel]{ display:none; }
[data-tab-panel].active{ display:block; }

/* IE：快捷入口 float 回退 */
.quick{
  display:block;
  overflow:hidden;
  padding:14px 0 0;
  clear:both;
}
.quick .q{
  float:left;
  width:24%;
  margin-right:1%;
  margin-bottom:12px;
  box-sizing:border-box;
}
.quick .q:nth-child(4n){
  margin-right:0;
}
@supports (display:grid){
  .quick{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
  }
  .quick .q{
    float:none;
    width:auto;
    margin-right:0;
    margin-bottom:0;
  }
}

.quick .q{
  border-radius:6px;
  height:100px;
  padding:10px 16px;
  display:flex;
  -ms-flex-direction:column;
  flex-direction:column;
  -ms-flex-align:start;
  align-items:flex-start;
  -ms-flex-pack:center;
  justify-content:center;
  color:#fff;
  text-align:left;
}

.q-title{
  font-size:16px;
  font-weight:800;
  letter-spacing:.5px;
  line-height:1.3;
}

.q-sub{
  margin-top:6px;
  font-size:12px;
  font-weight:400;
  opacity:.9;
}

.q.q1{
  background:url("../images/green.png") center center no-repeat;
  background-size:100% 100%;
}
.q.q2{
  background:url("../images/orange.png") center center no-repeat;
  background-size:100% 100%;
}
.q.q3{
  background:url("../images/qingse.png") center center no-repeat;
  background-size:100% 100%;
}
.q.q4{
  background:url("../images/blue.png") center center no-repeat;
  background-size:100% 100%;
}

.home-sections{padding:16px 0 26px;}
.section-title{
  text-align:center;
  color:#0f8e4a;
  color:var(--green-2);
  font-weight:900;
  letter-spacing:1px;
  margin:6px 0 14px;
}

.section-title img{
  max-width:100%;
  height:auto;
  display:inline-block;
}

/* IE / 非 Grid：首页双栏（环保志愿+党建工作）用 Flex 回退，保证两列等高且不溢出父容器 */
.home-two-cols{
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:nowrap;
  flex-wrap:nowrap;
}
.home-two-cols > div{
  /* 每列固定占 50%，避免 IE 下宽度累加超过 100% 溢出 */
  -ms-flex:0 0 50%;
  flex:0 0 50%;
  box-sizing:border-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:column;
  flex-direction:column;
}
/* 面板填满父高度326px，内容过多时内部滚动 */
.home-two-cols .panel .tab-panels{
  max-height:326px;
  overflow-y:auto;
}
@supports (display:grid){
  .home-two-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
  }
  .home-two-cols > div{
    margin-left:0;
  }
}

/* IE：面板内 图+文 横排 float 回退 */
.panel-focus{
  display:block;
  overflow:hidden;
  padding:14px;
}
.panel-focus .ph-img{
  float:left;
  width:180px;
  margin-right:12px;
  margin-bottom:0;
}
/* IE：固定宽度 180px 时强制 16:9 高度，避免 padding-bottom 按包含块算成竖条 */
.panel-focus .ph-img.ph-16x9{
  padding-bottom:0;
  height:101px;
}
.panel-focus .ph-img + div{
  overflow:hidden;
}
@supports (display:grid){
  .panel-focus{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:12px;
    padding:14px;
  }
  .panel-focus .ph-img{
    float:none;
    width:auto;
    margin-right:0;
  }
}

/* 首页“环保志愿 / 党建工作”标题图片：固定高度、宽度自适应、水平居中 */
.home-two-cols .section-title img{
  height:50px;
  width:auto;
  display:block;
  margin:0 auto;
}

/* IE：信息公开区 float 回退 */
.home-grid2{
  display:block;
  overflow:hidden;
}
.home-grid2 .panel{
  float:left;
  width:68%;
  margin-right:2%;
  box-sizing:border-box;
}
.home-grid2 .panel .tab-panels{
  max-height:250px;
  overflow-y:auto;
}
.home-grid2 .banner-box{
  width:30%;
  float:right;
  box-sizing:border-box;
  overflow:hidden;
}
.home-grid2 .banner-box .ph-img{
  margin-bottom:12px;
}
.home-grid2 .banner-box .ph-img:last-child{
  margin-bottom:0;
}
@supports (display:grid){
  .home-grid2{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:18px;
  }
  .home-grid2 .panel,
  .home-grid2 .banner-box{
    float:none;
    width:auto;
    margin-right:0;
  }
  .home-grid2 .banner-box .ph-img{
    margin-bottom:0;
  }
}

.banner-box{
  background:#fff;
  display:block;
}
.banner-box img{
  width:100%;
  height:auto;
  display:block;
}
@supports (display:grid){
  .banner-box{
    display:grid;
    gap:12px;
  }
}

.footer{
  background:#2c2c2c;
  color:#d8d8d8;
  padding:18px 0;
  margin-top:26px;
}

/* IE：页脚 float 回退 */
.footer .container{
  display:block;
  overflow:hidden;
}
.footer .container > div:first-child{
  float:left;
  width:75%;
  max-width:900px;
}
.footer .qr{
  float:right;
}
@supports (display:grid){
  .footer .container{
    display:grid;
    grid-template-columns:1fr 160px;
    gap:16px;
    align-items:center;
  }
  .footer .container > div:first-child,
  .footer .qr{
    float:none;
    width:auto;
    max-width:none;
  }
}

.footer .links{
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  gap:18px;
  font-size:12px;
  opacity:.95;
}
.footer .links a{margin-right:18px;margin-bottom:6px;}
.footer .links a:last-child{margin-right:0;}

.footer .copy{
  margin-top:10px;
  font-size:12px;
  opacity:.85;
  line-height:1.8;
}

.footer .qr{
  width:120px;
  height:120px;
  margin:0 0 0 auto;
  background:#2c2c2c;
  border:1px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.7);
  display:-ms-flexbox;
  display:flex;
  -ms-flex-align:center;
  align-items:center;
  -ms-flex-pack:center;
  justify-content:center;
}

.footer .qr img{
  max-width:100%;
  max-height:100%;
  display:block;
}

@media (max-width:1200px){
  .container{width:96%;}
}

@media (max-width:980px){
  .two-col{grid-template-columns:1fr;}
  .home-top{grid-template-columns:1fr;}
  .home-top > *:first-child{float:none;width:auto;margin-right:0;}
  .home-top > *:last-child{overflow:visible;}
  .home-grid2{grid-template-columns:1fr;}
  .home-grid2 .panel,.home-grid2 .banner-box{float:none;width:auto;margin-right:0;margin-bottom:18px;}
  .quick{grid-template-columns:repeat(2,1fr);}
  .quick .q{width:49%;margin-right:2%;}
  .quick .q:nth-child(4n){margin-right:2%;}
  .quick .q:nth-child(2n){margin-right:0;}
  .home-two-cols{
    display:block;
  }
  .home-two-cols > div{
    display:block;
    margin-left:0;
  }
  .grid{grid-template-columns:repeat(2,1fr);}
  .grid .card{width:48%;margin-right:2%;}
  .grid .card:nth-child(3n){margin-right:2%;}
  .grid .card:nth-child(2n){margin-right:0;}
  .grid.grid--4col .card{width:48%;margin-right:2%;}
  .grid.grid--4col .card:nth-child(4n){margin-right:2%;}
  .grid.grid--4col .card:nth-child(2n){margin-right:0;}
}

@media (max-width:560px){
  .searchbar{width:92%;}
  .nav{overflow:auto;}
  .nav a{padding:0 16px;white-space:nowrap;}
  .grid{grid-template-columns:1fr;}
  .grid .card{width:100%;margin-right:0;margin-bottom:22px;}
  .grid .card:last-child{margin-bottom:0;}
}