feat: Add a breadcrumb

assets/css/scss/elements/_team.scss

@@ -0,0 +1,129 @@
+//
+// Team Styles //
+//
+.team-wrapper {
+	.team-box {
+		text-align: center;
+		.team-img {
+			position: relative;
+			overflow: hidden;
+			margin-bottom: 20px;
+			img {
+				@include transform(scale(1));
+				width: 100%;
+				@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
+			}
+			div {
+				position: absolute;
+				top: 0;
+				left: 0;
+				opacity: 0;
+				background: get-color("dark", 0.4);
+				width: 100%;
+				height: 100%;
+				text-align: center;
+				@include transition(ease-out 0.12s);
+				ul {
+					list-style-type: none;
+					position: absolute;
+					top: 50%;
+					right: 0;
+					left: 0;
+					@include transform(translateY(-50%) scale(0.96));
+					margin: 0 -7px;
+					padding: 0 30px;
+					@include transition(ease-out 0.12s);
+					li {
+						display: inline-block;
+						margin: 0 7px;
+						a {
+							&:not([class^='button'], [class^="link-social"]) {
+								color: white;
+								&:hover {
+									color: get-color("white", 0.7);
+								}
+							}
+						}
+					}
+				}
+			}
+			&:hover {
+				img {
+					@include transform(scale(1.04));
+					@include filter(blur(1.5px));
+				}
+				div {
+					opacity: 1;
+					ul {
+						@include transform(translateY(-50%) scale(1));
+					}
+				}
+			}
+		}
+		span {
+			color: $color-primary-lighter;
+		}
+	}
+	&.team-box-hover-2 {
+		.team-box {
+			.team-img {
+				div {
+					top: auto;
+					bottom: 16px;
+					right: 16px;
+					left: 16px;
+					@include transform(translateY(5px));
+					background: white;
+					width: auto;
+					height: auto;
+					padding: 15px 20px;
+					ul {
+						position: static;
+						top: auto;
+						@include transform(translateY(0) scale(1));
+						padding: 0;
+						li {
+							a {
+								&:not([class^='button'], [class^="link-social"]) {
+									color: $color-primary;
+									&:hover, &:focus { color: get-color("dark"); }
+								}
+							}
+						}
+					}
+				}
+				&:hover {
+					img {
+						@include filter(blur(0));
+					}
+					div {
+						@include transform(translateY(0));
+						ul {
+							@include transform(translateY(0) scale(1));
+						}
+					}
+				}
+			}
+		}
+	}
+	&[class*='border-radius'] {
+		.team-box {
+			.team-img {
+				@include transform(translate3d(0,0,0));
+				overflow: hidden;
+			}
+		}
+	}
+	&.border-radius {
+		.team-box .team-img { border-radius: 0.4em; }
+	}
+	&.border-radius-1 {
+		.team-box .team-img { border-radius: 1.0em; }
+	}
+}
+.text-start {
+	.team-box { text-align: left; }
+}
+.text-end {
+	.team-box { text-align: right; }
+}