/**
 * Query Loop Styles
 * Add class "query-loop-styled-1" (or 2, 3, 4) to your Query block
 */

:root {
	--ql-height-1: 300px;
	--ql-height-1-mobile: 200px;
	--ql-height-2: 250px;
	--ql-height-2-mobile: 180px;
	--ql-height-3: 400px;
	--ql-height-3-mobile: 250px;
	--ql-height-4: 200px;
	--ql-height-4-mobile: 150px;
}

/* STYLE 1 - 300px */
[class*="query-loop-styled-1"] .gb-looper .gb-loop-item,
[class*="query-loop-styled-1"] .gb-loop-item {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
}

[class*="query-loop-styled-1"] .gb-looper .gb-loop-item:hover,
[class*="query-loop-styled-1"] .gb-loop-item:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}

[class*="query-loop-styled-1"] .gb-looper .gb-loop-item .gb-media,
[class*="query-loop-styled-1"] .gb-loop-item .gb-media {
	width: 100%;
	height: var(--ql-height-1);
	overflow: hidden;
	flex-shrink: 0;
}

[class*="query-loop-styled-1"] .gb-looper .gb-loop-item .gb-media img,
[class*="query-loop-styled-1"] .gb-loop-item .gb-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

[class*="query-loop-styled-1"] .gb-looper .gb-loop-item .gb-text,
[class*="query-loop-styled-1"] .gb-loop-item .gb-text {
	min-height: 3em;
	margin-top: 1rem;
	flex-shrink: 0;
}

[class*="query-loop-styled-1"] .gb-looper .gb-loop-item .gb-text {
	position: relative;
}

[class*="query-loop-styled-1"] .gb-looper .gb-loop-item .gb-text a {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* STYLE 2 - 250px */
[class*="query-loop-styled-2"] .gb-looper .gb-loop-item,
[class*="query-loop-styled-2"] .gb-loop-item {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
}

[class*="query-loop-styled-2"] .gb-looper .gb-loop-item:hover,
[class*="query-loop-styled-2"] .gb-loop-item:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}

[class*="query-loop-styled-2"] .gb-looper .gb-loop-item .gb-media,
[class*="query-loop-styled-2"] .gb-loop-item .gb-media {
	width: 100%;
	height: var(--ql-height-2);
	overflow: hidden;
	flex-shrink: 0;
}

[class*="query-loop-styled-2"] .gb-looper .gb-loop-item .gb-media img,
[class*="query-loop-styled-2"] .gb-loop-item .gb-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

[class*="query-loop-styled-2"] .gb-looper .gb-loop-item .gb-text,
[class*="query-loop-styled-2"] .gb-loop-item .gb-text {
	min-height: 3em;
	margin-top: 1rem;
	flex-shrink: 0;
}

[class*="query-loop-styled-2"] .gb-looper .gb-loop-item .gb-text {
	position: relative;
}

[class*="query-loop-styled-2"] .gb-looper .gb-loop-item .gb-text a {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* STYLE 3 - 400px */
[class*="query-loop-styled-3"] .gb-looper .gb-loop-item,
[class*="query-loop-styled-3"] .gb-loop-item {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
}

[class*="query-loop-styled-3"] .gb-looper .gb-loop-item:hover,
[class*="query-loop-styled-3"] .gb-loop-item:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}

[class*="query-loop-styled-3"] .gb-looper .gb-loop-item .gb-media,
[class*="query-loop-styled-3"] .gb-loop-item .gb-media {
	width: 100%;
	height: var(--ql-height-3);
	overflow: hidden;
	flex-shrink: 0;
}

[class*="query-loop-styled-3"] .gb-looper .gb-loop-item .gb-media img,
[class*="query-loop-styled-3"] .gb-loop-item .gb-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

[class*="query-loop-styled-3"] .gb-looper .gb-loop-item .gb-text,
[class*="query-loop-styled-3"] .gb-loop-item .gb-text {
	min-height: 3em;
	margin-top: 1rem;
	flex-shrink: 0;
}

[class*="query-loop-styled-3"] .gb-looper .gb-loop-item .gb-text {
	position: relative;
}

[class*="query-loop-styled-3"] .gb-looper .gb-loop-item .gb-text a {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* STYLE 4 - 200px */
[class*="query-loop-styled-4"] .gb-looper .gb-loop-item,
[class*="query-loop-styled-4"] .gb-loop-item {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
}

[class*="query-loop-styled-4"] .gb-looper .gb-loop-item:hover,
[class*="query-loop-styled-4"] .gb-loop-item:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}

[class*="query-loop-styled-4"] .gb-looper .gb-loop-item .gb-media,
[class*="query-loop-styled-4"] .gb-loop-item .gb-media {
	width: 100%;
	height: var(--ql-height-4);
	overflow: hidden;
	flex-shrink: 0;
}

[class*="query-loop-styled-4"] .gb-looper .gb-loop-item .gb-media img,
[class*="query-loop-styled-4"] .gb-loop-item .gb-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

[class*="query-loop-styled-4"] .gb-looper .gb-loop-item .gb-text,
[class*="query-loop-styled-4"] .gb-loop-item .gb-text {
	min-height: 3em;
	margin-top: 1rem;
	flex-shrink: 0;
}

[class*="query-loop-styled-4"] .gb-looper .gb-loop-item .gb-text {
	position: relative;
}

[class*="query-loop-styled-4"] .gb-looper .gb-loop-item .gb-text a {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* RESPONSIVE */
@media (max-width: 768px) {
	[class*="query-loop-styled-1"] .gb-looper .gb-loop-item .gb-media,
	[class*="query-loop-styled-1"] .gb-loop-item .gb-media {
		height: var(--ql-height-1-mobile);
	}
	[class*="query-loop-styled-2"] .gb-looper .gb-loop-item .gb-media,
	[class*="query-loop-styled-2"] .gb-loop-item .gb-media {
		height: var(--ql-height-2-mobile);
	}
	[class*="query-loop-styled-3"] .gb-looper .gb-loop-item .gb-media,
	[class*="query-loop-styled-3"] .gb-loop-item .gb-media {
		height: var(--ql-height-3-mobile);
	}
	[class*="query-loop-styled-4"] .gb-looper .gb-loop-item .gb-media,
	[class*="query-loop-styled-4"] .gb-loop-item .gb-media {
		height: var(--ql-height-4-mobile);
	}
}