
.post-wrap {
   max-width: 970px;
   margin: 0 auto;
   display: flex;
   justify-content: left;
   flex-wrap: wrap;
}
.post-item {
   padding: 5px;
   cursor: pointer;
}
.post-item * {
   transition: .3s linear;
}
.item-content {
   background: #007f99d4;
   padding: 20px;height: 300px;width: 210px;
}

@media screen and (max-width: 580px) {
	.item-content  {
		 background: #007f99d4;
   padding: 20px;height: 300px;width: 100%;
	}
}
.item-icon {
   margin-bottom: 20px;
}
.item-icon:before {
   content: "";
   font-family: FontAwesome;
   color: #f1f1f1;
   font-size: 50px;
   line-height: 1;
}
.item-icon.photo:before {
   content: "\f007";
}
.item-icon.video:before {
   content: "\f1d8";
}
.item-icon.gift:before {
   content: "\f109";
}
.item-icon.group:before {
   content: "\f0c0";
}
.item-icon.tree:before {
   content: "\f1bb";
}
.item-icon.anchor:before {
   content: "\f13d";
}
.post-item:hover .item-icon, .post-item:hover .item-body h3, .post-item:hover .item-body p {
   transform: translateY(-8px);
}
.item-body {
   color: #f1f1f1;
   font-size: 14px;
}
.item-body h3 {
   font-weight: 500;
   margin-bottom: 15px;
   transition-delay: .05s;font-size: 1.3rem;
}
.item-body p {
   transition-delay: .1s;
}
.item-footer {
   padding-top: 15px;
}
.link {
   text-decoration: none;
   display: inline-block;
   overflow: hidden;
   position: relative;
   padding-right: 30px;
   font-size: 12px;
   text-transform: uppercase;
   font-weight: 600;
   color: #f1f1f1;
}
.link:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   bottom: 0;
   height: .125rem;
   margin: auto;
   background: #F09EA3;
   transform: scaleX(.2);
   transform-origin: left center;
   z-index: 0;
   transition: .6s cubic-bezier(.6, .01, 0, 1);
}
.link span {
   display: inline-block;
   position: relative;
   transform: translateX(-200%);
   transition: .6s cubic-bezier(.6, .01, 0, 1);
}
.post-item:hover .link span {
   transform: translateX(0%);
}
.post-item:hover .link:before {
   transform-origin: right center;
}
@media (min-width: 768px) {
   .post-item {
      flex-basis: 50%;
      flex-shrink: 0;
   }
}
@media (min-width: 960px) {
   .post-item {
      flex-basis: 25%;
   }
}