.projects {
  display: flex;
  .project {
    padding: 8px;
    color: black;
    text-decoration: none;
    background-color: #ececec;
    margin: 8px;
    outline: none;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);

    &:hover, &:focus {
      box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }
    
    img {
      width: 100%;
    }

    header {
      padding: 8px;
      font-style: italic;
    }
  }
}