/* ============================================================================================
	LOOP GRID / PATTERN
============================================================================================ */
.hhobar-main {
	flex: 1;
	min-width: 0
}
.hhobar-loop-grid-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 30px
}
.gap-target.is-style-hhobar-gap-small .hhobar-loop-grid-list {
	gap: 20px
}
.gap-target.is-style-hhobar-gap-large .hhobar-loop-grid-list {
	gap: 40px
}

.hhobar-no-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.hhobar-query-category {
	display: flex;
	flex-flow: wrap;
	align-items: center;
	gap: 10px
}
.hhobar-query-category a {
	padding: .3em 1em;
	border-radius: 100px;
	background: var(--wp--preset--color--translucent-w-10);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: .3s ease-in-out
}
.hhobar-query-category a:hover {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base)
}
.hhobar-query-category .wp-block-post-terms__separator {
	display: none
}


/* pagination */
.hhobar-query-pagination {
	margin-top: var(--wp--preset--spacing--large) !important;
	gap: 10px
}
.hhobar-query-pagination-prev,
.hhobar-query-pagination-next {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	padding: 0 1.5em;
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: background .3s, color .3s ease-in-out
}
.hhobar-query-pagination-prev:hover,
.hhobar-query-pagination-next:hover {
	background: var(--wp--preset--color--accent-1) !important;
	color: var(--wp--preset--color--base)
}
.hhobar-query-pagination-number {
	display: flex;
	flex-flow: wrap;
	gap: 10px;
	margin: 0 15px !important
}
.hhobar-query-pagination-number .page-numbers {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 40px;
	height: 40px;
}
.hhobar-query-pagination-number a {
	background: var(--wp--preset--color--contrast-grade-3);
	color: white;
	text-decoration: none;
	transition: background .3s, color .3s ease-in-out
}
.hhobar-query-pagination-number a:hover {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base)
}