.item-yi {
  grid-area: yi;
  background:#1a67b2;
}
.item-er {
  grid-area: er;
  background:#dddddd;
}
.item-san {
  grid-area: san;
  background:url(/html/template/smfh/images/img20.jpg) no-repeat;
  background-size: cover;
  overflow: hidden;
}
.item-si {
  grid-area: si;
  background:url(/html/template/smfh/images/img19.jpg) no-repeat;
  background-size: cover;
  overflow: hidden;
}
.item-wu {
  grid-area: wu;
  background:#f6f6f6;
}
.item-liu {
  grid-area: liu;
  background:#dddddd;
}
.item-qi {
  grid-area: qi;
  background:url(/html/template/smfh/images/img22.jpg) no-repeat;
  background-size: cover;
  overflow: hidden;
}
.item-ba {
  grid-area: ba;
  background:#f6f6f6;
}
.item-jiu {
  grid-area: jiu;
  background:#ddd;
}
.item-shi {
  grid-area: shi;
  background:#f6f6f6;
}
.item-shiyi {
  grid-area: shiyi;
  background:url(/html/template/smfh/images/img21.jpg) no-repeat;
  background-size: cover;
  overflow: hidden;
}
.item-shier {
  grid-area: shier;
  background:#ddd;
}
.item-shisan {
  grid-area: shisan;
  background:#f6f6f6;
}
.item-shisi {
  grid-area: shisi;
  background:#dddddd;
}
.item-shiwu {
  grid-area: shiwu;
  background:#1a67b2;
}
.item-shiliu {
  grid-area: shiliu;
  background:#1a67b2;
}
.item-shiqi {
  grid-area: shiqi;
  background:#1a67b2;
}
.item-shiba {
  grid-area: shiba;
  background:url(/html/template/smfh/images/img23.jpg) no-repeat;
  background-size: cover;
  overflow: hidden;
}
.item-shijiu {
  grid-area: shijiu;
  background:#1a67b2;
}
.item-ershi {
  grid-area: ershi;
  background:#ddd;
}
.item-ershiyi {
  grid-area: ershiyi;
  background:#1a67b2;
}
.mbitem-ershier {
  grid-area: ershier;
  background:#1a67b2;
}

.grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: auto;
  grid-gap: 8px;
  grid-template-areas: 
    "yi yi er san san si si si si wu liu qi qi ba"
    "shi shiyi shiyi san san si si si si shiqi shiqi qi qi jiu"
    "shier shiyi shiyi shiliu shiliu si si si si shiba shiba shijiu shijiu ershi"
	"shisan shisi shiwu shiliu shiliu si si si si shiba shiba ershiyi ershiyi ershiyi";
  height: 100vh;
  max-width:1200px;
  margin:0 auto;
  max-height:335px;
}
.grid div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  color: #fff;
    font-size: 1.1rem;
  font-weight: 300;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition-property: filter, backdrop-filter, opacity, color;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-transition-property: opacity, color, -webkit-filter, -webkit-backdrop-filter;
  transition-property: opacity, color, -webkit-filter, -webkit-backdrop-filter;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  border-radius:8px;
}
.grid div:hover {
  color: #fff;
}
.grid span{ margin-left:15px; margin-right:15px;}
.grid div span:first-of-type {
  z-index: 2;
}
.grid div .overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.8));
  backdrop-filter: blur(6px);
  transition-property: opacity;
  transition-duration: 0.4s;
  transition-timing-function: ease-out;
  z-index: -1;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.8));
  -webkit-backdrop-filter: blur(6px);
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-out;
}
.grid div .shop {
  display: block;
  color:#fff;
  font-size: 0.8rem;
  font-weight: 100;
  margin-bottom:25px;
  opacity:1;
  transition-property: margin-bottom, opacity;
  transition-duration: 0.3s;
  transition-timing-function: ethiopic-halehame-om-et;
  z-index: 2;
  -webkit-transition-property: margin-bottom, opacity;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ethiopic-halehame-om-et;
}
.grid div .shop i{ display:block; font-size:30px; font-weight:100;}
.grid div:hover > .overlay {
  opacity: 1;
}
.grid div:hover {
  filter: brightness(1.2);
  -webkit-filter: brightness(1.2);
}
.grid div:hover > .shop {
  opacity: 1;
  margin-bottom:10%;
}
.mbgrid{ display:none;} 

@media screen and (max-width: 840px) {
  .mbgrid {
	  display:block;
	  height: 100vh;
      max-width:720px;
	  width:100%;
      margin:0 auto;
      max-height:600px;
  }
  .mbgrid div {
	float:left;
    border-radius:8px;
	width:43%;
	color:#FFF;
	padding:3%;
  }
  .mbgrid div span{margin-left:15px; margin-right:15px; font-size:1.2rem;}
  .mbgrid .shop{display: block;
  color:#fff;
  font-size: 0.8rem;
  height:3.5rem;
  font-weight: 100;
  margin-top: 8px;}
}