Iris/src/scss/views/_artist.scss

.artist-view {
	.intro {
		position: relative;
		@include clearfix;
		margin-bottom: 40px;

		.parallax {
			position: absolute;
			z-index: 0;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}

		.thumbnail {
			position: absolute;
			z-index: 3;
			max-width: 240px;
			bottom: 0;
			left: 40px;
		}

		.heading-wrapper {
			height: 50vh;
			position: relative;
			z-index: 2;

			.heading {
				position: absolute;
				bottom: 0;
				left: 320px;

				h1 {
					color: #FFFFFF;
					padding-top: 30px;
					padding-bottom: 10px;
				}

				.sub-views {
					color: #FFFFFF;

					.option {
						display: inline-block;
						padding: 8px 0;
						margin-right: 20px;
						font-size: 18px;
						font-weight: 400;
						border-bottom: 4px solid transparent;
						cursor: pointer;

						&.active {
							border-color: $off_white;
						}

						&:not(.active):hover {
							border-color: rgba(255,255,255,0.2);
						}
					}
				}
			}
		}

		.details-wrapper {
			padding-left: 320px;
			padding-top: 35px;

			.actions {
				float: left;
				margin-right: 20px;
			}

			.details {
				padding-top: 6px;
			}
		}

	}

	.artist-list {
		padding-top: 15px;
	}

	@include responsive( $bp_medium ){
		.intro {
			padding: 50px 30px 60px 30px;

			.parallax {
				height: 100%;
				background: $darkest_grey;
				canvas {
					opacity: 0.2;
					@include blur( 5px );
				}
			}

			.thumbnail {
				position: relative;
				width: 180px;
				margin: 0 auto 10px;
				left: auto;
				bottom: auto;
			}

			.heading-wrapper {
				height: auto;
				position: static;

				.heading {
					position: static;
					bottom: auto;
					left: auto;

					h1 {
						position: relative;
						text-align: center;
						padding: 15px 0;
					}

					.sub-views {
						position: absolute;
						bottom: 0;
						left: 20px;
						right: 20px;
					}
				}
			}

			.details-wrapper {
				padding: 0;
				position: relative;
				left: 0;
				right: 0;
				padding: 20px 0;
				z-index: 3;

				.actions {
					text-align: center;
					margin: 0;
					float: none;

					button {
						margin: 0 3px;
					}
				}

				.details {
					display: none;
				}
			}
		}

		.body {
			&.overview {
				.col.w70 {
					width: 100%;
				}
				.col.w5,
				.related-artists {
					display: none;
				}
			}
		}
	}
}