/*
 * Loop elements
 */

.w-grid {
	clear: both; /* used in WooCommerce lists */
	container-type: inline-size;
	}
.w-grid + .w-grid:not(.cols_1),
.w-grid-none + .w-grid:not(.cols_1) {
	margin-top: calc(var(--gap, 0px) * 2); /* force gap between neighbour "w-grid" elements */
	}
.w-hwrapper:not(.wrap) > .w-grid + .w-grid:not(.cols_1),
.w-hwrapper:not(.wrap) > .w-grid-none + .w-grid:not(.cols_1) {
	margin-top: 0;
	}
	.w-grid.no_results > *,
	.w-grid-list:empty {
		display: none !important;
		}
	.w-grid.valign_center .w-grid-list {
		align-items: center;
		}
		.w-grid-item {
			flex-shrink: 0;
			min-width: 0; /* disable overflowing the .w-grid-list by items content */
			}
			.w-grid-item-h {
				position: relative;
				height: 100%;
				}
			.w-grid.overflow_hidden .w-grid-item-h {
				overflow: hidden;
				}
				.w-grid-item-h time {
					display: block;
					}
				.w-grid-item-anchor {
					position: absolute;
					z-index: 10;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					}
				/* Move the focus outline inside because of overflow: hidden */
				.w-grid[class*="ratio_"] .w-grid-item-anchor:focus-visible {
					outline-offset: calc( -1 * var(--focus-outline-width, 2px ) );
					}
				.w-grid .w-post-elm > p:only-of-type {
					display: inline-block;
					}

.w-grid-none.type_message {
	text-align: center;
	padding: 2rem;
	margin: 0;
	background: var(--color-content-bg-alt-grad);
	}

/* TYPE: Regular */
.w-grid.type_grid .w-grid-list {
	display: grid;
	grid-template-columns: repeat( var(--columns, 1), 1fr );
	grid-auto-flow: dense;
	gap: calc( var(--gap, 0px) * 2 );
	}
	.w-grid.type_grid .w-grid-item.size_2x1 {
		grid-column-end: span min( 2, var(--columns, 1) );
		}
	.w-grid.type_grid .w-grid-item.size_1x2 {
		grid-row-end: span min( 2, var(--columns, 1) );
		}
	.w-grid.type_grid .w-grid-item.size_2x2 {
		grid-column-end: span min( 2, var(--columns, 1) );
		grid-row-end: span min( 2, var(--columns, 1) );
		}

/* TYPE: Masonry */
.w-grid.type_masonry .w-grid-list {
	display: flex;
	flex-wrap: wrap;
	margin: calc( var(--gap, 0px) * -1 );
	}
	.w-grid.type_masonry .w-grid-item {
		padding: var(--gap, 0px);
		width: calc( 100% / var(--columns, 1) );
		}
	.w-grid.type_masonry .w-grid-item.size_2x1,
	.w-grid.type_masonry .w-grid-item.size_2x2 {
		width: min( 100%, 100% / var(--columns, 1) * 2 );
		}
	.w-grid.type_masonry.cols_1 .w-grid-item:not(:last-child) {
		padding: 0;
		margin-bottom: var(--gap, 0px);
		}
		.w-grid.type_masonry .w-grid-item-h {
			height: auto;
			}
		/* reset aspect ratio for video */
		.w-grid.type_masonry .post_image .w-video-h,
		.w-grid:not([class*="cols_"]) .post_image .w-video-h {
			padding-bottom: 56.25% !important;
			}

/* TYPE: Metro */
.w-grid.type_metro .w-grid-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* TODO: make dependence on columns */
	grid-auto-flow: dense;
	gap: calc( var(--gap, 0px) * 2 );
	}
.w-grid.type_metro .w-grid-item:nth-child(6n-3),
.w-grid.type_metro .w-grid-item:nth-child(6n-2) {
	grid-column-end: span 2;
	grid-row-end: span 2;
	}

/* Fixed Aspect Ratio */
.w-grid[class*="ratio_"] .w-grid-item-h {
	overflow: hidden;
	height: auto;
	}
	.w-grid[class*="ratio_"] .w-grid-item-h:before {
		content: '';
		float: left;
		height: 0;
		width: 1px;
		margin-left: -1px;
		padding-bottom: calc( var(--item-ratio, 1) * 100% );
		}
		.w-grid[class*="ratio_"] .post_image img,
		.w-grid[class*="ratio_"] .w-post-elm.type_image img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			}

@media screen and (min-width: 601px) {
.w-grid[class*="ratio_"] .w-grid-item.size_2x1 .w-grid-item-h:before {
	padding-bottom: calc( var(--item-ratio, 1) / 2 * 100% - var(--gap, 0px) * var(--item-ratio, 1) );
	}
.w-grid[class*="ratio_"] .w-grid-item.size_1x2 .w-grid-item-h:before {
	padding-bottom: calc( var(--item-ratio, 1) * 2 * 100% + var(--gap, 0px) * 2 );
	}
.w-grid[class*="ratio_"] .w-grid-item.size_2x2 .w-grid-item-h:before {
	padding-bottom: calc( var(--item-ratio, 1) * 100% - var(--gap, 0px) * 2 * ( var(--item-ratio, 1) - 1 ) );
	}
}

/* Preloader (only used in deprecated Grid element) */
.w-grid-preloader {
	position: relative;
	height: 0;
	width: 100%;
	overflow: hidden;
	}
	.w-grid-preloader .g-preloader {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		}
.w-grid-preloader.active {
	height: 20rem;
	}
.w-grid-preloader.active ~ .g-loadmore,
.w-grid-preloader.active ~ .pagination {
	display: none;
	}

/* Preload Style: Spinner */
.w-grid.preload_style_spinner.filtering > .w-grid-list,
.w-grid.preload_style_spinner.filtering > .pagination,
.w-grid.preload_style_spinner.filtering + .w-grid-none {
	display: none;
	}

/* Preload Style: Fade */
.w-grid.preload_style_fade.filtering > .w-grid-list,
.w-grid.preload_style_fade.filtering > .g-loadmore,
.w-grid.preload_style_fade.filtering > .pagination,
.w-grid.preload_style_fade.filtering + .w-grid-none {
	opacity: .33;
	}

/* Preload Style: Placeholders */
.w-grid.preload_style_placeholders.filtering + .w-grid-none,
.w-grid.preload_style_placeholders.filtering .w-grid-item {
	animation: 1s linear infinite both background-moving;
	background: linear-gradient(to right, rgba(128,128,128,.15) 8%, rgba(128,128,128,.25) 18%, rgba(128,128,128,.15) 33%);
	background-size: 1000px auto;
	color: transparent;
	}
	.w-grid.preload_style_placeholders.filtering > .pagination,
	.w-grid.preload_style_placeholders.filtering + .w-grid-none *,
	.w-grid.preload_style_placeholders.filtering .w-grid-item * {
		visibility: hidden !important;
		}
@keyframes background-moving {
	0% { background-position: -500px 0 }
	100% { background-position: 500px 0 }
}

/* Wrappers */
.w-grid-item .w-hwrapper,
.w-grid-item .w-vwrapper {
	position: relative;
	z-index: 1;
	}
.w-grid-item-h > .w-vwrapper:only-child {
	height: 100%;
	}
.w-hwrapper > .w-grid,
.w-hwrapper > .w-vwrapper:has(> .w-grid) {
	width: 100%;
	}

/* Colors
   ========================================================================== */
.color_alternate .w-grid-none.type_message {
	background: var(--color-alt-content-bg-grad);
	}
.l-section.color_primary .w-grid-none.type_message,
.l-section.color_secondary .w-grid-none.type_message {
	background: rgba(255,255,255,0.1);
	}

/* Responsive
   ========================================================================== */
@media screen and (max-width: 600px) {
.w-grid.type_metro .w-grid-list {
	grid-template-columns: 1fr 1fr !important;
	}
}