.project-preview_container {
display: flex; flex-direction: row; flex-wrap: wrap;
}
.project-preview {
width: calc(100% * (1/3) - 32px); display: flex; flex-direction: column; background-color: #FFF; margin-bottom: 32px; margin-right: 32px; border-radius: 10px; border: 1px solid #DDD; box-sizing: border-box; overflow: hidden; text-decoration: none; box-shadow: 0 1px 1px 0 rgba(31, 35, 46, 0.15); transition: all .3s ease;
}
.project-preview:hover {
transform: translate(0px, -2px); box-shadow: 0 15px 45px -10px rgba(10, 16, 34, 0.2);
}
.project-preview-image {
height: 200px; > span { width: 100%; height: 100%; display: block; background-size: cover; background-position: 50% 50%; }
}
.project-preview-text {
flex: 1; padding: 10px;
}
.project-preview-title {
color: #3B5998; font-size: 24px; font-weight: bold; text-align: center;
}
.project-preview-title:hover {
text-decoration: underline;
}
.project-preview-tagline {
margin-top: 16px;
}