/* The magic */
		.photo .col1 {
			overflow: hidden;
			position: relative;
		}

		.photo .slide1 {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			/* 
		    Visibility delay gives the previously hovered element time to slide out before disappearing.
		    Remove the `visibility` transition to slide in current element without sliding out previous element
		  */
			-webkit-transition: all 0.275s ease-in-out, visibility 0s 0.275s;
			transition: all 0.275s ease-in-out, visibility 0s 0.275s;
			visibility: hidden;
			will-change: transform;
			-webkit-transform: translateY(100%);
			transform: translateY(100%);
		}

		.photo .row1:hover~.row1 .slide1 {
			-webkit-transform: translateY(-100%);
			transform: translateY(-100%);
		}

		.photo .row1:hover .slide1 {
			-webkit-transform: translateX(100%);
			transform: translateX(100%);
		}

		.photo .row1:hover .col1:hover~.col1 .slide1 {
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
		}

		.photo .row1:hover .col1:hover .slide1 {
			-webkit-transform: none;
			transform: none;
			visibility: visible;
			-webkit-transition-delay: 0s;
			transition-delay: 0s;
		}

		/* Pen styling */
		.photo * {
			box-sizing: border-box;
		}

		.photo .container1 {
			margin: 0 auto;
			padding: 2rem;
			max-width: 1200px;
		}

		.photo .row1 {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
		}

		.photo .col1 {
			color: #fff;
			-webkit-box-flex: 1;
			-ms-flex: 1 1 auto;
			flex: 1 1 auto;
			min-height: 260px;
			position: relative;
		}

		.photo .col1 h2 {
			font-weight: 300;
			font-size: 1.33333rem;
			line-height: 1.25;
			margin: 0;
			position: absolute;
			bottom: 1.5rem;
			right: 1.5rem;
			z-index: 0;
		}

		.photo .col1:nth-child(2) {
			min-width: 20%;
		}

		.photo .col1:nth-child(4) {
			min-width: 33%;
		}

		.col1:nth-child(3)+.col1:nth-child(3) {
			min-width: 50%;
		}

		.photo .photo-container1 {
			background: #0f0523 50% 50% / cover;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			-webkit-transition: 1s;
			transition: 1s;
			-webkit-transform-origin: bottom right;
			transform-origin: bottom right;
		}

		.photo .photo-container1::before {
			background: -webkit-linear-gradient(transparent, rgba(67, 17, 51, 0.5), #000320);
			background: linear-gradient(transparent, rgba(67, 17, 51, 0.5), #000320);
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}

		.photo .col1:hover .photo-container1 {
			-webkit-transform: scale(1.25);
			transform: scale(1.25);
		}

		.photo .slide1 {
			background: rgba(25, 1, 21, 0.8);
			padding: 0 1.5rem;
		}

		.photo h2 {
			color: #fff;
		}

		.photo p {
			color: #fff;
			line-height: 1.2em;
			padding-top: 1em;
		}