.m-photo-block {
	max-width: 100%;
	position: relative;
	display: block;
	text-decoration: none;
	z-index: 0;

	&--right {
		@include media($sm-breakpoint) {
			width: 50%;
			float: right;
			margin: 0px -30% 10px 30px;
			width: 55%;
		}

		@include media($md-breakpoint) {
			margin-right: -35%;
			width: 65%;
		}

		.m-photo-block__caption {
			padding-left: 0;
		}

	}

	&--left {
		@include media($sm-breakpoint) {
			width: 50%;
			float: left;
			margin: 10px 20px 0 -15%;
		}

		@include media($md-breakpoint) {
			margin-left: -17.5%;

		}

		.m-photo-block__caption {
			padding-left: 0;
		}
	}

	&__link {
		display: block;
		width: 100%;

		&::after,
		&::before {
			display: none;
		}
	}

	&__inner {
		position: relative;
	}

	&__image-wrap {
		position: relative;
		overflow: hidden;

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			opacity: 0;
			z-index: 1;
			background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
			@include size(100%, 50%);
			transition: opacity $transition-slow ease-out;
		}
	}

	&__image {
		position: relative;
		top: 0;
		left: 0;
		display: block;
		z-index: -2;
		@include object-fit(cover, center);
		@include size(100%, 100%);
		transform: scale(1);
		transition: transform $transition-slow ease;
	}

	&__cta {
		@include fluid-props(width height, $fluid-min, $fluid-max, 33px, 48px);

		position: absolute;
		right: 0;
		bottom: 0;
		background: $color-primary;
		transform: scale(1);
		transform-origin: right bottom;
		z-index: 3;
		transition: transform $transition-mid ease-out;

		svg {
			@include fluid-props(width height, $fluid-min, $fluid-max, 20px, 40px);
			@include centerer(true, true);
		}
	}

	&__credit {
		@include fluid-props(font-size, $fluid-min, $fluid-max, 6px, 9px);
		@include fluid-props(line-height, $fluid-min, $fluid-max, 8px, 12px);
		@include fluid-props(letter-spacing, $fluid-min, $fluid-max, 0px, 0.87px);

		position: absolute;
		@include fluid-props(left, $fluid-min, $fluid-max, -10px, -16px);
		@include fluid-props(bottom, $fluid-min, $fluid-max, -8px, -12px);
		color: $color-gray-dark;
		text-transform: uppercase;
		font-family: $font-highlight;
		letter-spacing: .9px;
		transform: rotate(-90deg);
		transform-origin: left top;
	}

	&__caption {
		@extend .u-t-size--16;
		@extend .u-t-line--22;
		position: relative;
		font-family: $font-highlight;
		padding: 10px 10px 1px 10px;
		text-align: right;
		color: $color-text;
		letter-spacing: .5px;

		&::before,
		&::after {
			@include fluid-props(width, $lg-breakpoint, 2560px, 4px, 8px);

			content: "";
			position: absolute;
			right: 0;
			background-color: $color-primary;
			z-index: 2;
		}

		&::before {
			@include fluid-props(height, $fluid-min, $fluid-max, 34px, 49px);
			top: 1px;
			transform: translateY(-100%);
		}

		&::after {
			bottom: 0;
			height: 100%;
		}

		@include media($sm-breakpoint) {
			padding-left: 45%;
			padding-right: 25px;
		}
	}
}

/**
 * Hover effect
 */
.m-photo-block__link {

	@include hover-behaviour {

		.m-photo-block__image-wrap::after {
			opacity: .6;
		}

		.m-photo-block__cta {
			transform: scale(1.1);
		}
	}
}