.fox-block.location-blocks {
	
	* + & {
		margin-top: 2rem;
	}
	
	.results {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-left: -.75rem;

		@media (max-width: 767px) {
			margin-left: 0;
		}

		@media (min-width: 1168px) {
			padding: 2.5rem 0 0;
		}
	}

	.result {
		background-color: var(--lightgrey);
		display: grid;
		grid-template-areas: "container";
		height: 420px;
		margin-bottom: .75rem;
		margin-left: .75rem;
		overflow: hidden;
		position: relative;
		width: 281px;

		@media (max-width: 767px) {
			margin-left: 0;
			width: 100%;
		}

		&:not(.empty):after {
			background: rgba(0,0,0,0.35);
			content: '';
			height: calc(100% + 2px);
			position: absolute;
			/*transform: translateY(100%);*/
			transition: opacity .5s;
			width: 100%;
			opacity: 1;
			bottom: -2px;
		}

		&:not(.empty):before {
			background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(2, 0, 36, 0) 60%, rgba(2, 0, 36, 0) 100%);
			content: '';
			height: calc(100% + 2px);
			position: absolute;
			/*transform: translateY(100%);*/
			transition: height .5s;
			width: 100%;
			opacity: 1;
			bottom: -2px;
			z-index: 1;
		}
		
		&:hover:not(.empty):after {
			opacity: 0;
		}

		.title,
		&:hover .title {
			opacity: 1;
		}

		@media (min-width: 1168px) {
			&:not(.empty):after,
			&:not(.empty):hover:after {
				transform: translateY(0);
			}

			&:nth-of-type(4n+2) {
				transform: translateY(-2.5rem);
			}

			&:nth-of-type(4n+4) {
				transform: translateY(1.75rem);
			}
		}

		@media (max-width: 1167px) {
			.title {
				opacity: 1;
			}

			&:not(.empty):after {
				transform: translateY(0);
			}
		}
	}

	img {
		grid-area: container;
		height: 100%;
		object-fit: cover;
		position: absolute;
		width: 100%;
	}

	& .title {
		align-self: flex-end;
		color: var(--white);
		font-family: var(--secondary-font);
		font-size: calc(clamp(1.3rem, 0.8688rem + 1.9167vw, 1.875rem) * 1.2);
		font-weight: 500;
		grid-area: container;
		line-height: 1.33;
		margin-bottom: 0.8em;
		opacity: 0;
		text-align: left;
		transition: opacity 1s;
		z-index: 2;
		text-transform: uppercase;
		padding-left: 0.8em;
	}

	a {
		grid-area: container;
		height: 100%;
		position: relative;
		width: 100%;
		z-index: 2;
	}
}