.project-container

max-width: 750px
margin: 0px auto 0px
padding: 30px
+clearfix
.project-unit
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
  cursor: pointer
  display: block
  width: 600px
  height: 300px
  margin: 0px auto 30px
  position: relative
  overflow: hidden
  background:
    position: center center
    repeat: no-repeat
    size: cover
  .project-overlay
    +position(absolute, 100% 0px null 0px)
    height: 100%
    background: fade-out(#333, 0.5)
    text-align: center
    //+transition
    +display(flex)
    +align-items(center)
    +justify-content(space-around)
    strong
      display: block
      padding: 20px
      color: white
      line-height: 1.2
      font:
        size: 24px
        weight: 300
  &:hover .project-overlay
    +position(absolute, 0px 0px null 0px)

@media (max-width: 768px)

.project-container
  max-width: 80vw
  .project-unit
    width: 80vw
    height: 40vw