.widget-taxonomy-tiles {
	&__holder {
		float: left;
		padding: 0;
		transform: translateZ(0);
	}
	&__inner {
		position: relative;
		overflow: hidden;

		.tiles-columns & {
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.term-img {
			display: block;
			width: 100%;
			height: auto;
		}

		&:hover {
			.widget-taxonomy-tiles__hidden-content {
				max-height: 200px;
				visibility: visible;
				margin-top: 10px;
			}
		}
	}
	.tiles-columns {
		.term-img {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}
	}
	&__content {
		position: absolute;
		z-index: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 15px;

		@include media-breakpoint-up(lg) {
			padding: 13px 20px 14px;
		}
		&:before {
			position: absolute;
			z-index: -1;
			left: 0;
			top: 0;
			height: 100%;
			bottom: 0;
			width: 100%;
			content: '';
			opacity: 0.85;
			transition: $bounce;
		}
	}
	&__title {
		margin: 0;
	}
	&__row {
		display: flex;
		align-items: center;

		&.widget-taxonomy-tiles__hidden-content {
			align-items: flex-end;
		}
		.widget-taxonomy-tiles__post-count,
		.widget-taxonomy-tiles__permalink {
			margin-left: auto;
			padding-left: 10px;
		}
	}
	&__desc {
		margin-top: 0;
		margin-bottom: 10px;
	}
	&__hidden-content {
		margin-top: 10px;

		@include media-breakpoint-up(lg) {
			margin-top: 0;
			max-height: 0;
			visibility: hidden;
			overflow: hidden;
			transition: $bounce;
		}
	}
	&__post-count {
		display: block;
		font-size: .857em;
	}

	.tiles-columns {
		display: block;

		@include tiles(tile-xl-x, width, 8);
		@include tiles(tile-md-x, width, 4);
		@include tiles(tile-md-y, height, 4);
		@include tiles(tile-xl-y, height, 8);

		@include media-breakpoint-only(sm) {
			@include tiles(tile-md-x, width, 6);
			@include tiles(tile-xl-x, width, 12);
			@include tiles(tile-md-y, height, 5);
			@include tiles(tile-xl-y, height, 6);
		}
		@include media-breakpoint-up(xl) {
			@include tiles(tile-md-y, height, 1.925);
			@include tiles(tile-xl-y, height, 3.85);
		}
		.before-loop-area &,
		.after-loop-area & {
			@include media-breakpoint-up(md) {
				@include tiles(tile-md-x, width, 4);
				@include tiles(tile-xl-x, width, 8);
				@include tiles(tile-md-y, height, 2.75);
				@include tiles(tile-xl-y, height, 5.5);
			}
		}

		.sidebar & {
			@include media-breakpoint-up(md) {
				@include tiles(tile-md-x, width, 12);
				@include tiles(tile-xl-x, width, 12);
				@include tiles(tile-md-y, height, 3.25);
				@include tiles(tile-xl-y, height, 3.25);
			}
		}
		.footer-area:not(.footer-area--fullwidth) & {
			@include media-breakpoint-up(sm) {
				@include tiles(tile-md-x, width, 12);
				@include tiles(tile-xl-x, width, 12);
				@include tiles(tile-md-y, height, 3.25);
				@include tiles(tile-xl-y, height, 3.25);
			}
		}

		&:after {
			display: block;
			clear: both;
			content: '' !important;
		}
		.tile-xs-x, .tile-sm-x, .tile-sm-x, .tile-md-x {
			@include media-breakpoint-only(sm) {
				.widget-taxonomy-tiles__title {
					@include font-size(12/16);
				}
				.widget-taxonomy-tiles__content {
					padding: 10px;
				}
			}
		}

		.tile-xs-x, .tile-sm-x, .tile-sm-x, .tile-md-x, .tile-lg-x {
			.sidebar & {
				@include media-breakpoint-up(md) {
					width: 100%;
				}
			}
			.footer-area:not(.footer-area--fullwidth) & {
				@include media-breakpoint-up(sm) {
					width: 100%;
				}
			}
		}

		&.tiles-layout-1 {
			@supports (display: grid) {
				display: grid;
				grid-auto-flow: column;
				grid-template-columns: 1fr;

				@include media-breakpoint-up(md) {
					grid-template-columns: repeat(2, 1fr);
				}
				@include media-breakpoint-up(xl) {
					grid-template-columns: repeat(3, 1fr);
				}
			}
			.widget-taxonomy-tiles__holder {
				float: none;

				.widget-taxonomy-tiles__inner {
					position: relative;
					height: 350px;

					@include media-breakpoint-up(xl) {
						height: 203px;
					}
				}
				&:nth-child(5n+1),
				&:nth-child(5n+2) {
					grid-column: 1 / span 1;
				}
				&:nth-child(5n+3) {
					grid-column: 1 / span 1;

					@include media-breakpoint-up(md) {
						grid-column: 2 / span 1;
						grid-row: span 2;
					}

					.widget-taxonomy-tiles__inner {
						height: 740px;

						@include media-breakpoint-up(xl) {
							height: 446px;
						}
					}
				}
				&:nth-child(5n+4) {
					grid-column: 1 / span 1;
				}
				&:nth-child(5n+5) {
					grid-column: 1 / span 1;

					@include media-breakpoint-up(md) {
						grid-column: 2 / span 1;
					}
				}
				&:nth-child(5n+4),
				&:nth-child(5n+5) {
					@include media-breakpoint-up(xl) {
						grid-column: 3 / span 1;
					}
				}
			}
		}
	}
}

@include media-breakpoint-up(sm) {
	.sidebar,
	.footer-area:not(.footer-area--fullwidth) {
		.widget-taxonomy-tiles {
			.grid-columns:not(.columns-number-1) {
				.widget-taxonomy-tiles__content {
					display: none;
				}
			}
		}
	}
}