.c-masonry-tiles {
	@media (width > 768px) {
		.c-masonry-tiles__tiles,
		.c-masonry-tiles__tiles--1,
		.c-masonry-tiles__tiles--2,
		.c-masonry-tiles__tiles--3,
		.c-masonry-tiles__tiles--4 {
			display: grid;
			gap: 0.5rem;
		}

		.c-masonry-tiles__tiles:not(:last-of-type),
		.c-masonry-tiles__tiles--1:not(:last-of-type),
		.c-masonry-tiles__tiles--2:not(:last-of-type),
		.c-masonry-tiles__tiles--3:not(:last-of-type),
		.c-masonry-tiles__tiles--4:not(:last-of-type) {
			margin-bottom: 0.5rem;
		}

		.c-masonry-tiles__tiles--1 {
			grid-template-columns: 1fr;
			grid-template-rows: 1fr;
		}
		.c-masonry-tiles__tiles--2 {
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 2fr;
		}
		.c-masonry-tiles__tiles--3 {
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr;
		}
		.c-masonry-tiles__tiles--4 {
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr;
		}

		/* Specific tile placements */
		.c-masonry-tiles__tiles--2 .c-masonry-tiles__tile:nth-child(1) {
			grid-column: 1 / span 1;
			grid-row: 1 / span 1;
		}
		.c-masonry-tiles__tiles--2 .c-masonry-tiles__tile:nth-child(2) {
			grid-column: 2 / span 1;
			grid-row: 1 / span 1;
		}
		.c-masonry-tiles__tiles--3 .c-masonry-tiles__tile:nth-child(1) {
			grid-column: 1 / span 2;
			grid-row: 1 / span 1;
		}
		.c-masonry-tiles__tiles--3 .c-masonry-tiles__tile:nth-child(2) {
			grid-column: 1 / span 1;
			grid-row: 2 / span 1;
		}
		.c-masonry-tiles__tiles--3 .c-masonry-tiles__tile:nth-child(3) {
			grid-column: 2 / span 1;
			grid-row: 2 / span 1;
		}
		.c-masonry-tiles__tiles--4 .c-masonry-tiles__tile:nth-child(1) {
			grid-column: 1 / span 1;
			grid-row: 1 / span 2;
		}
		.c-masonry-tiles__tiles--4 .c-masonry-tiles__tile:nth-child(2) {
			grid-column: 2 / span 1;
			grid-row: 1 / span 1;
		}
		.c-masonry-tiles__tiles--4 .c-masonry-tiles__tile:nth-child(3) {
			grid-column: 3 / span 1;
			grid-row: 1 / span 1;
		}
		.c-masonry-tiles__tiles--4 .c-masonry-tiles__tile:nth-child(4) {
			grid-column: 2 / span 2;
			grid-row: 2 / span 1;
		}
	}

	/* Individual tile styling */
	.c-masonry-tiles__tile {
		position: relative;
		display: flex;
		overflow: hidden;

		@media (width <= 768px) {
			flex-direction: column;
			margin-bottom: var(--spacing-md);

			&:last-child {
				margin-bottom: 0;
			}
		}

		@media (width > 768px) {
			min-height: 380px;
		}

		/* Hover overlay behavior */
		&:not(.c-masonry-tiles__tile--image-only) {
			@media (width > 768px) {
				.c-masonry-tiles__tile-content {
					position: relative;
					z-index: 2;
					color: var(--color-white);
					padding: var(--spacing-sm);
					transition: background 0.3s ease-in-out;
					display: flex;
					flex-direction: column;
					height: 100%;

					.c-masonry-tiles__tile-text,
					.c-masonry-tiles__tile-button-wrapper {
						opacity: 0;
						transition: opacity 0.4s ease-in-out 0.2s;
					}

					.c-masonry-tiles__tile-heading-wrapper {
						display: flex;
						align-items: flex-start;
						justify-content: space-between;
						gap: 1rem;
					}

					.c-masonry-tiles__tile-heading {
						position: relative;
						font-weight: bold;
					}
				}

				&:hover,
				&:focus-within {
					.c-masonry-tiles__tile-content {
						background: var(--color-primary);

						.c-masonry-tiles__tile-text,
						.c-masonry-tiles__tile-button-wrapper {
							opacity: 1;
						}

						.c-masonry-tiles__tile-heading-arrow {
							transform: rotate(90deg);
						}
					}
				}
			}
		}

		&.c-masonry-tiles__tile--image-only {
			.c-masonry-tiles__tile-content {
				display: none;
			}
		}

		.c-masonry-tiles__tile-heading-arrow {
			margin-top: 4px;
			transition: transform 0.15s ease-in-out;

			@media (width < 768px) {
				display: none;
			}
		}
	}

	.c-masonry-tiles__tile-image {
		@media (width <= 768px) {
			width: 100%;
			height: auto;
			display: block;
		}

		@media (width > 768px) {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: 1;
		}
	}

	.c-masonry-tiles__tile-content {
		flex-grow: 1;
		z-index: 2;

		@media (width <= 768px) {
			padding: var(--spacing-sm);
			order: 1;
		}
	}

	.c-masonry-tiles__tile-heading {
		@media (width > 768px) {
			color: var(--color-white);
		}
	}

	.c-masonry-tiles__tile-text {
		margin-top: var(--heading-space);
	}

	.c-masonry-tiles__tile-button-wrapper {
		display: inline-flex;
		flex-direction: column;
		align-items: flex-start;
		margin-top: 14px;
	}
}