/* Tiles */

	.tiles {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		margin: -2.5em 0 0 -2.5em;
	}

		* + .tiles {
			margin-top: 2em;
		}

		.tiles article {
			position: relative;
			width: calc(33.33333% - 2.5em);
			margin: 2.5em 0 0 2.5em;
			transition: transform 0.5s ease, opacity 0.5s ease;
		}

			.tiles article > .image {
				position: relative;
				display: block;
				width: 100%;
				overflow: hidden;
				border-radius: var(--radius);
				transition: transform 0.5s ease;
			}

				.tiles article > .image img {
					display: block;
					width: 100%;
				}

				/* Colored overlay above the image */
				.tiles article > .image::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					display: block;
					width: 100%;
					height: 100%;
					opacity: 0.8;
					pointer-events: none;
					transition: background-color 0.5s ease, opacity 0.5s ease;
				}

			.tiles article.style1 > .image::before {
				background-color: var(--color-accent);
			}

			/* Link covering the whole tile */
			.tiles article > a {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 3;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				padding: 1em;
				border-bottom: 0;
				border-radius: var(--radius);
				text-align: center;
				text-decoration: none;
				color: var(--color-white);
				transition: background-color 0.5s ease, transform 0.5s ease;
			}

				.tiles article > a:hover {
					color: var(--color-white) !important;
				}

				.tiles article > a > :last-child {
					margin: 0;
				}

				.tiles article > a h2 {
					margin: 0;
				}

				.tiles article > a .content {
					width: 100%;
					max-height: 0;
					margin-top: 0.35em;
					line-height: 1.5;
					opacity: 0;
					transition: max-height 0.5s ease, opacity 0.5s ease;
				}

					.tiles article > a .content > :last-child {
						margin-bottom: 0;
					}

		body:not(.is-touch) .tiles article:hover > .image {
			transform: scale(1.1);
		}

			body:not(.is-touch) .tiles article:hover > .image::before {
				background-color: #333333;
				opacity: 0.35;
			}

		body:not(.is-touch) .tiles article:hover .content,
		body.is-touch .tiles article .content {
			max-height: 15em;
			opacity: 1;
		}

		body.is-preload .tiles article {
			transform: scale(0.9);
			opacity: 0;
		}

	@media screen and (max-width: 1280px) {

		.tiles {
			margin: -1.25em 0 0 -1.25em;
		}

			.tiles article {
				width: calc(33.33333% - 1.25em);
				margin: 1.25em 0 0 1.25em;
			}

	}

	@media screen and (max-width: 980px) {

		.tiles {
			margin: -2.5em 0 0 -2.5em;
		}

			.tiles article {
				width: calc(50% - 2.5em);
				margin: 2.5em 0 0 2.5em;
			}

	}

	@media screen and (max-width: 736px) {

		.tiles {
			margin: -1.25em 0 0 -1.25em;
		}

			.tiles article {
				width: calc(50% - 1.25em);
				margin: 1.25em 0 0 1.25em;
			}

				.tiles article:hover > .image {
					transform: scale(1);
				}

	}

	@media screen and (max-width: 480px) {

		.tiles {
			margin: -0.75em 0 0 -0.75em;
		}

			.tiles article {
				width: calc(50% - 0.75em);
				margin: 0.75em 0 0 0.75em;
			}

				.tiles article > a {
					padding: 0.5em;
				}

					.tiles article > a h2 {
						font-size: 0.85em;
					}

		body.is-touch .tiles article .content {
			display: none;
		}

	}