.gallery-template{padding: 10px; width: 100%;}
.gallery-template .wrapper{display: grid;grid-template-columns: repeat(4, 24.7%);grid-row-gap: 8px;grid-column-gap: 0.5%;grid-auto-flow: row dense;}
.gallery-template .wrapper.col5{grid-template-columns: repeat(5, 19.6%)!important;grid-row-gap: 8px;grid-column-gap: 0.5%;}
.gallery-template .wrapper.col4{grid-template-columns: repeat(4, 24.7%)!important;grid-row-gap: 8px;grid-column-gap: 0.4%;}
.gallery-template .wrapper.col3{grid-template-columns: repeat(3, 33%)!important;grid-row-gap: 5px;grid-column-gap: 0.5%;}
.gallery-template .wrapper.col2{grid-template-columns: repeat(2, 49.5%)!important;grid-row-gap: 8px;grid-column-gap: 1%;}
.gallery-template .inner{}
.gallery-template .item{ background-color: #fff; box-shadow: 0 0 5px rgb(0 0 0 / 10%);  border-radius: 5px; transition:all 0.3s linear 0s;display: inline-block;}

.gallery-template .item.portrait{ background-size: auto 100%!important;grid-row-start: span 2; }
.gallery-template .item.portrait .thumb-wrapper .thumb{padding-bottom: 100%;}
.gallery-template .item:hover{box-shadow: 0 10px 30px #ccc;transform:scale(0.95); transition:all 0.3s linear 0s;}
.gallery-template .item .thumb-wrapper{ position: relative;overflow: hidden;  background-color: #eee; box-shadow: 0 0 50px #eee; border-radius: 3px;transform:scale(1); transition:all 0.3s linear 0s;}
.gallery-template .item .thumb-wrapper .thumb{padding:60% 100% 0 0; background-position: center;background-size: auto 100%;display: block;}
.gallery-template .item .text-wrapper{  padding: 13px ; text-align: left;  background-color: #fff; overflow: hidden;text-overflow:ellipsis;  border-radius: 0px 0px 5px 5px;}
.gallery-template .item .text-wrapper .title{font-size: 16px;height: 44px; }
.gallery-template .item .text-wrapper .info{}
.gallery-template .item .text-wrapper .tips{height:24px;font-size: 12px;margin-top: 10px;color: #999; overflow: hidden;}
.gallery-template .item .text-wrapper .tips .tip{display: inline-block; font-size: 12px;color: #999;margin-right: 15px;line-height: 12px;}
.gallery-template .item .text-wrapper .tips .tip i{margin-right: 5px;}
.gallery-template .item .text-wrapper .tips .tip.tag{display: inline-block; font-size: 12px; padding: 5px 15px; border-radius: 3px;  margin:0px 10px 0px 0px; border: 1px solid #eee;margin-bottom: 5px;}
.gallery-template .item .text-wrapper .tips .tip.tag:hover{background-color: #f9f9f9}
.gallery-template .item mark{transform:rotate(45deg);; width: 100px;  position: absolute;font-size: 10px;top:-7px;right: -45px; padding: 15px 5px 5px 5px; text-align: center; color:#fff;  }
.gallery-template .item .mark-free{  background-color:#90d420;}
.gallery-template .item .mark-cost{  background-color:#9D845A;}


@media screen and (max-width: 1024px) {
/*当屏幕尺寸小于1200px时，应用下面的CSS样式*/

.gallery-template .wrapper{grid-template-columns: repeat(3,33%);grid-row-gap: 5px;grid-column-gap: 0.5%;}
.gallery-template .wrapper.col5{grid-template-columns: repeat(3,33%)!important;grid-row-gap: 5px;grid-column-gap: 0.5%;}
.gallery-template .wrapper.col4{grid-template-columns: repeat(3,33%)!important;grid-row-gap: 5px;grid-column-gap: 0.5%;}
.gallery-template .wrapper.col3{grid-template-columns: repeat(3,33%)!important;grid-row-gap: 5px;grid-column-gap: 0.5%;}
.gallery-template .wrapper.col2{grid-template-columns: repeat(3,33%)!important;grid-row-gap: 5px;grid-column-gap: 0.5%;}
   
}

@media screen and (max-width: 900px) {
/*当屏幕尺寸小于1200px时，应用下面的CSS样式*/

.gallery-template .wrapper{ grid-template-columns: repeat(2, 49.5%);grid-row-gap: 8px;grid-column-gap: 1%;}
.gallery-template .wrapper.col5{grid-template-columns: repeat(5, 49.5%)!important;grid-row-gap: 8px;grid-column-gap: 1%;}
.gallery-template .wrapper.col4{grid-template-columns: repeat(5, 49.5%)!important;grid-row-gap: 8px;grid-column-gap: 1%;}
.gallery-template .wrapper.col3{grid-template-columns: repeat(5, 49.5%)!important;grid-row-gap: 8px;grid-column-gap: 1%;}
.gallery-template .wrapper.col2{grid-template-columns: repeat(5, 49.5%)!important;grid-row-gap: 8px;grid-column-gap: 1%;}
   

}