/********** General CSS ***********/

.ghub-query-collage-container {
	&.ghub-qa-wide {
		max-width: var(--wp--style--global--wide-size) !important;
	}

	&.ghub-qa-full {
		max-width: 100% !important;
	}

	display: grid;
	grid-gap: var(--ghub-qc-collage-gap, 10px);
	height: var(--ghub-qc-collage-height, 500px);
	& .ghub-query-collage-item-container {
		height: 100% !important;

		& .ghub-inner-content {
			overflow: hidden;
			height: 100% !important;
			background: var(--ghub-qc-collage-item-bg-color);
			padding-top: var(--ghub-qc-collage-item-padding-top);
			padding-left: var(--ghub-qc-collage-item-padding-left);
			padding-bottom: var(--ghub-qc-collage-item-padding-bottom);
			padding-right: var(--ghub-qc-collage-item-padding-right);
			border-top-left-radius: var(--ghub-qc-collage-item-radius-top-left);
			border-top-right-radius: var(--ghub-qc-collage-item-radius-top-right);
			border-bottom-left-radius: var(--ghub-qc-collage-item-radius-bottom-left);
			border-bottom-right-radius: var(
				--ghub-qc-collage-item-radius-bottom-right
			);
			border-top: var(--ghub-qc-collage-item-border-top);
			border-right: var(--ghub-qc-collage-item-border-right);
			border-bottom: var(--ghub-qc-collage-item-border-bottom);
			border-left: var(--ghub-qc-collage-item-border-left);
		}

		& .wp-block-cover {
			height: 100% !important;
			min-height: auto !important;

			& img {
				height: 100% !important;
				width: 100% !important;
				max-width: 100% !important;
			}

			& .wp-block-cover__inner-container {
				margin-bottom: 0px !important;
			}
		}
	}
}

/********** Collage Layout CSS ***********/

.gp-post-grid-style-1 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
			"one two"
			"one three";

		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}
	}
}

.gp-post-grid-style-2 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
			"one one four four"
			"two three four four";

		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}
	}
}

.gp-post-grid-style-3 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
			"one two four"
			"one three four";

		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}
	}
}

.gp-post-grid-style-4 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
			"one three four"
			"two three four";

		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}
	}
}

.gp-post-grid-style-5 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
			"one two two"
			"three three four";

		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}
	}
}

.gp-post-grid-style-6 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"one two five"
			"one two five"
			"one three five"
			"one three five"
			"one four five"
			"one four five";

		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}

		& .ghub-query-collage-item-container:nth-child(5) {
			grid-area: five;
		}
	}
}

.gp-post-grid-style-7 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"one two three"
			"one two three"
			"one two four"
			"one two four"
			"one two five"
			"one two five";

		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}

		& .ghub-query-collage-item-container:nth-child(5) {
			grid-area: five;
		}
	}
}

.gp-post-grid-style-8 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"one two two"
			"one two two"
			"one two two"
			"one two two"
			"three four five"
			"three four five";

		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}

		& .ghub-query-collage-item-container:nth-child(5) {
			grid-area: five;
		}
	}
}

.gp-post-grid-style-9 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
			"two three"
			"one one";

		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}
	}
}

.gp-post-grid-style-10 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"one one two two four four"
			"one one two two four four"
			"one one two two five five"
			"one one three three five five"
			"one one three three six six"
			"one one three three six six";

		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}

		& .ghub-query-collage-item-container:nth-child(5) {
			grid-area: five;
		}

		& .ghub-query-collage-item-container:nth-child(6) {
			grid-area: six;
		}
	}
}

.gp-post-grid-style-11 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"one one one one one one five five"
			"one one one one one one five five"
			"two two three three three three five five"
			"two two three three three three six six"
			"two two four four four four six six"
			"two two four four four four six six";

		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}

		& .ghub-query-collage-item-container:nth-child(5) {
			grid-area: five;
		}

		& .ghub-query-collage-item-container:nth-child(6) {
			grid-area: six;
		}
	}
}

.gp-post-grid-style-12 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"one one three three four four"
			"one one three three four four"
			"two two three three four four"
			"two two three three four four"
			"five five five six six six"
			"five five five six six six"
			"five five five six six six"
			"five five five six six six"
			"five five five six six six";
		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}

		& .ghub-query-collage-item-container:nth-child(5) {
			grid-area: five;
		}

		& .ghub-query-collage-item-container:nth-child(6) {
			grid-area: six;
		}
	}
}

.gp-post-grid-style-13 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"one one one two two two"
			"one one one two two two"
			"one one one two two two"
			"one one one two two two"
			"three three five five six six"
			"three three five five six six"
			"four four five five seven seven"
			"four four five five seven seven";
		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}

		& .ghub-query-collage-item-container:nth-child(5) {
			grid-area: five;
		}

		& .ghub-query-collage-item-container:nth-child(6) {
			grid-area: six;
		}

		& .ghub-query-collage-item-container:nth-child(7) {
			grid-area: seven;
		}
	}
}

.gp-post-grid-style-14 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 30% 1fr;
		grid-template-areas:
			"one one"
			"two three";
		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}
	}
}

.gp-post-grid-style-15 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 30% 1fr;
		grid-template-areas:
			"one one one"
			"two three four";
		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}
	}
}

.gp-post-grid-style-16 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		grid-template-areas:
			"one one two"
			"one one three"
			"four five five";
		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}

		& .ghub-query-collage-item-container:nth-child(5) {
			grid-area: five;
		}
	}
}

.gp-post-grid-style-17 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"one two two"
			"one two two"
			"three five five"
			"three five five"
			"four five five"
			"four five five";
		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}

		& .ghub-query-collage-item-container:nth-child(5) {
			grid-area: five;
		}
	}
}

.gp-post-grid-style-18 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		grid-template-areas:
			"one two two"
			"one two two"
			"three four five";

		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}

		& .ghub-query-collage-item-container:nth-child(5) {
			grid-area: five;
		}
	}
}

.gp-post-grid-style-19 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		grid-template-areas:
			"one one two"
			"one one two"
			"three four five";

		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}

		& .ghub-query-collage-item-container:nth-child(5) {
			grid-area: five;
		}
	}
}

.gp-post-grid-style-20 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		grid-template-areas:
			"one one two three"
			"one one six six"
			"four five six six";

		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}

		& .ghub-query-collage-item-container:nth-child(5) {
			grid-area: five;
		}

		& .ghub-query-collage-item-container:nth-child(6) {
			grid-area: six;
		}
	}
}

.gp-post-grid-style-21 {
	& .ghub-query-collage-container {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		grid-template-areas:
			"one one two two"
			"one one two two"
			"three four five six";

		& .ghub-query-collage-item-container:nth-child(1) {
			grid-area: one;
		}

		& .ghub-query-collage-item-container:nth-child(2) {
			grid-area: two;
		}

		& .ghub-query-collage-item-container:nth-child(3) {
			grid-area: three;
		}

		& .ghub-query-collage-item-container:nth-child(4) {
			grid-area: four;
		}

		& .ghub-query-collage-item-container:nth-child(5) {
			grid-area: five;
		}

		& .ghub-query-collage-item-container:nth-child(6) {
			grid-area: six;
		}
	}
}

/**************** Media Query ***************/

@media (max-width: 600px) {
	.ghub-query-collage-container {
		&.ghub-qc-stack-on-mobile {
			display: block;
			height: auto !important;

			& .ghub-query-collage-item-container {
				margin-bottom: 10px;
				height: 500px !important;
			}
		}
	}
}

/******* Masonry Layout CSS *********/

.ghub-query-masonry {
	& .wp-block-post-template {
		column-gap: 10px;
		&.columns-1 {
			-webkit-columns: 1; /* Chrome, Safari, Opera */
			-moz-columns: 1; /* Firefox */
			columns: 1; /* Standard syntax */
		}

		&.columns-2 {
			-webkit-columns: 2; /* Chrome, Safari, Opera */
			-moz-columns: 2; /* Firefox */
			columns: 2; /* Standard syntax */
		}

		&.columns-3 {
			-webkit-columns: 3; /* Chrome, Safari, Opera */
			-moz-columns: 3; /* Firefox */
			columns: 3; /* Standard syntax */
		}

		&.columns-4 {
			-webkit-columns: 4; /* Chrome, Safari, Opera */
			-moz-columns: 4; /* Firefox */
			columns: 4; /* Standard syntax */
		}

		&.columns-5 {
			-webkit-columns: 5; /* Chrome, Safari, Opera */
			-moz-columns: 5; /* Firefox */
			columns: 5; /* Standard syntax */
		}

		&.columns-6 {
			-webkit-columns: 6; /* Chrome, Safari, Opera */
			-moz-columns: 6; /* Firefox */
			columns: 6; /* Standard syntax */
		}

		&.is-layout-grid {
			display: block !important;
		}

		& li {
			margin-block-start: 0px !important;
			margin-bottom: 10px;
			display: block !important;
			break-inside: avoid;
		}
	}
}