.wp-block-themeisle-blocks-posts-grid {
	--text-align: initial;
	--vert-align: initial;
	--img-border-radius: 0;
	--img-box-shadow: none;
	--image-ratio: inherit;
	--border-width: 0;
	--text-color: inherit;
	--background-color: inherit;
	--background-overlay: #0000005e;
	--border-color: inherit;
	--border-radius: 0;
	--border-radius-start-start: 0;
	--border-radius-start-end: 0;
	--border-radius-end-start: 0;
	--border-radius-end-end: 0;
	--box-shadow: none;
	--content-gap: 10px;

	--img-width: 100%;
	--img-width-tablet: var( --img-width );
	--img-width-mobile: var( --img-width-tablet );

	--title-text-size: initial;
	--title-text-size-tablet: var( --title-text-size );
	--title-text-size-mobile: var( --title-text-size-tablet );

	--description-text-size: 16px;
	--description-text-size-tablet: var( --description-text-size );
	--description-text-size-mobile: var( --description-text-size-tablet );

	--meta-text-size: 14px;
	--meta-text-size-tablet: var( --meta-text-size );
	--meta-text-size-mobile: var( --meta-text-size-tablet );

	--column-gap: 30px;
	--column-gap-tablet: var( --column-gap );
	--column-gap-mobile: var( --column-gap-tablet );

	--row-gap: 30px;
	--row-gap-tablet: var( --row-gap );
	--row-gap-mobile: var( --row-gap-tablet );

	--content-padding: inherit;
	--content-padding-tablet: var( --content-padding );
	--content-padding-mobile: var( --content-padding-tablet );

	--pag-size: 16px;
	--pag-color: inherit;
	--pag-bg-color: transparent;
	--pag-color-hover: var(--pag-color);
	--pag-bg-color-hover: rgba(0,0,0,0.5);
	--pag-color-active: var(--pag-color);
	--pag-bg-color-active: rgba(0,0,0,0.1);

	--pag-border-color: transparent;
	--pag-border-color-hover: var(--pag-border-color); // TODO: add handles for this.
	--pag-border-color-active: var(--pag-border-color);

	--pag-border-radius: 0;
	--pag-border-width: 0;
	--pag-padding: 5px 15px;
	--pag-gap: 5px;
	--pag-cont-margin: 10px 0 0 0;

	border: none;

	&.has-dark-bg {
		--text-color: #fff;
	}

	&.is-style-boxed {
		--background-color: rgb( 240, 245, 250);

		.o-posts-grid-post-body {
			padding: var( --content-padding, 20px );
		}
	}

	&.is-style-tiled {
		.o-posts-grid-post-blog {
			background-color: var( --background-color );
			border-width: var( --border-width );
			border-style: solid;
			border-color: var( --border-color );
			border-radius: var( --border-radius );
			box-shadow: var( --box-shadow );
		}

		.o-featured-post {
			background-color: var( --background-color );

			.o-posts-grid-post-body {
				background: var( --background-overlay );
				border-radius: calc( var( --border-radius-start-start ) - var( --border-width) ) calc( var( --border-radius-start-end ) - var( --border-width) ) calc( var( --border-radius-end-start ) - var( --border-width) ) calc( var( --border-radius-end-end ) - var( --border-width) );
			}
		}

		.o-posts-grid-post {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: end;
			background: var( --background-overlay );
			border-radius: calc( var( --border-radius-start-start ) - var( --border-width) ) calc( var( --border-radius-start-end ) - var( --border-width) ) calc( var( --border-radius-end-start ) - var( --border-width) ) calc( var( --border-radius-end-end ) - var( --border-width) );
		}

		.o-posts-grid-post,
		.o-featured-post {
			.o-posts-grid-post-body {
				padding: var( --content-padding, 36px );
				color: var( --text-color, #fff );

				.o-posts-grid-post-title a {
					color: var( --text-color, #fff );
				}
			}
		}
	}

	&:not(.is-style-tiled) {
		.o-posts-grid-post-blog {
			.o-posts-grid-post {
				background: var( --background-color );
				border-width: var( --border-width );
				border-style: solid;
				border-color: var( --border-color );
				border-radius: var( --border-radius );
				box-shadow: var( --box-shadow );
			}
		}

		.o-featured-container {
			.o-featured-post {
				background-color: var( --background-color );
			}
		}
	}

	.is-grid {
		display: grid;
		column-gap: var( --column-gap );
		row-gap: var( --row-gap );
	}

	.is-list {
		display: flex;
		flex-wrap: wrap;
		row-gap: var( --row-gap );
	}

	.is-grid {
		&.o-posts-grid-columns-2 {
			grid-template-columns: auto auto;
		}

		&.o-posts-grid-columns-3 {
			grid-template-columns: auto auto auto;
		}

		&.o-posts-grid-columns-4 {
			grid-template-columns: auto auto auto auto;
		}

		&.o-posts-grid-columns-5 {
			grid-template-columns: auto auto auto auto auto;
		}
	}

	.is-list {
		.o-posts-grid-post {
			display: flex;

			.o-posts-grid-post-image {
				flex-basis: 33.33%;
				padding-right: 20px;

				a {
					height: 100%;
				}

				img {
					height: 100%;
				}
			}

			.o-posts-grid-post-body {
				flex-basis: 66.66%;

				&.is-full {
					flex-basis: 100%;
				}
			}
		}
	}

	.o-posts-grid-post-blog {
		width: 100%;
		position: relative;
		display: inline-block;
		border: 0;
		position: relative;
		word-wrap: break-word;
		background-clip: border-box;

		.o-posts-grid-post {
			overflow: hidden;
		}
	}

	.o-posts-grid-post-image {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;

		a {
			width: var( --img-width );
			max-width: 100%;
			text-align: var( --text-align );
		}

		img {
			width: var( --img-width );
			max-width: 100%;
			height: auto;
			border-radius: 5px;
			border-radius: var( --img-border-radius );
			box-shadow: var( --img-box-shadow );
			object-fit: cover;
			object-position: center center;
			aspect-ratio: var( --image-ratio );
		}
	}

	.o-posts-grid-post-body {
		display: flex;
		flex-direction: column;
		justify-content: var( --vert-align );
		padding-bottom: 15px;
		text-align: var( --text-align );
		padding: var( --content-padding );
		gap: var( --content-gap );

		.o-posts-grid-post-category {
			font-size: var( --meta-text-size );
			color: var( --text-color );
			text-transform: capitalize;
			margin: 0;

			a {
				font-size: var( --meta-text-size );
				color: var( --text-color );
			}
		}

		.o-posts-grid-post-title {
			margin: 0;
			line-height: 1.25em;

			a {
				text-decoration: none;
				transition: all .15s ease 0s;
				font-size: var( --title-text-size );
				color: var( --text-color );

				&:hover {
					text-decoration: underline;
				}
			}
		}

		.o-posts-grid-post-meta {
			font-size: var( --meta-text-size );
			color: var( --text-color );
			margin: 0;

			a {
				font-size: var( --meta-text-size );
				color: var( --text-color );
			}
		}

		.o-posts-grid-post-description {
			margin: 0;

			p {
				margin: 0px;
				font-size: var( --description-text-size );
				color: var( --text-color );
			}

			.read-more {
				font-size: var( --description-text-size );
				color: var( --text-color );
				display: block;
				margin: 0;
				margin-top: calc( var( --content-gap ) / 2 );
			}
		}

	}

	.o-featured-container {
		display: flex;

		.o-featured-post {
			width: 100%;
			border-width: var( --border-width );
			border-style: solid;
			border-color: var( --border-color );
			border-radius: var( --border-radius );
			box-shadow: var( --box-shadow );
			margin-bottom: var( --row-gap );

			.o-posts-grid-post-image a {
				width: 100%;

				img {
					width: 100%;
					height: 250px;
					object-fit: cover;
					object-position: center center;
					aspect-ratio: var( --image-ratio );
				}
			}

		}
	}

	.o-posts-grid-pag {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: baseline;
		width: 100%;

		gap: var(--pag-gap);
		color: var(--pag-color);
		font-size: var(--pag-size);
		margin: var(--pag-cont-margin);

		.page-numbers:not(.dots) {
			background-color: var(--pag-bg-color);
			border-color: var(--pag-border-color);
			border-radius: var(--pag-border-radius);
			border-width: var(--pag-border-width);
			padding: var(--pag-padding);

			text-decoration: none;
			color: inherit;
			border-style: solid;
			box-sizing: border-box;
			text-align: center;
			margin: 0;

			&:hover {
				background-color: var(--pag-bg-color-hover);
				border-color: var(--pag-border-color-hover);

				color: var(--pag-color-hover);
			}

			&[aria-current="page"] {
				background-color: var(--pag-bg-color-active);
				border-color: var(--pag-border-color-active);

				color: var(--pag-color-active);
			}
		}
	}
}

@media ( max-width: 960px ) {
	.o-posts-grid-post-image img {
		width: min( var( --img-width ), 100% );
	}
}

@media ( min-width: 600px ) and ( max-width: 960px ) {
	.wp-block-themeisle-blocks-posts-grid {
		.is-grid {
			&.o-posts-grid-columns-4, &.o-posts-grid-columns-5 {
				grid-template-columns: auto auto auto;
			}

			.o-posts-grid-post-blog {
				min-width: 33%;
			}
		}

		.o-posts-grid-post-image {
			a {
				width: var( --img-width-tablet );
			}

			img {
				width: var( --img-width-tablet );
			}
		}

		&.is-style-boxed {
			.o-posts-grid-post-body {
				padding: var( --content-padding-tablet, 20px );
			}
		}

		.is-list {
			row-gap: var( --row-gap-tablet );
		}

		.o-posts-grid-post-body {
			padding: var( --content-padding-tablet );

			.o-posts-grid-post-category {
				font-size: var( --meta-text-size-tablet );
			}

			.o-posts-grid-post-meta {
				font-size: var( --meta-text-size-tablet );
			}

			.o-posts-grid-post-title {
				a {
					font-size: var( --title-text-size-tablet );
				}
			}

			.o-posts-grid-post-description {
				p {
					font-size: var( --description-text-size-tablet );
				}

				.read-more {
					font-size: var( --description-text-size-tablet );
				}
			}
		}

		.is-grid {
			column-gap: var( --column-gap-tablet );
			row-gap: var( --row-gap-tablet );
		}

		.o-featured-container {
			.o-featured-post {
				margin-bottom: var( --row-gap-tablet );
			}
		}
	}
}

@media ( max-width: 600px ) {
	.wp-block-themeisle-blocks-posts-grid {
		.is-grid {
			grid-template-columns: auto;

			&.o-posts-grid-columns-2, &.o-posts-grid-columns-3, &.o-posts-grid-columns-4, &.o-posts-grid-columns-5 {
				grid-template-columns: auto;
			}
		}

		.is-list {
			.o-posts-grid-post {
				flex-direction: column;
				padding: 10px;

				.o-posts-grid-post-image {
					flex-basis: 100%;
					padding: 0;
				}

				.o-posts-grid-post-body {
					flex-basis: 100%;
					padding: 0;
				}
			}
		}

		.o-posts-grid-post-image {
			a {
				width: var( --img-width-mobile );
			}

			img {
				width: var( --img-width-mobile );
			}
		}

		&.is-style-boxed {
			.o-posts-grid-post-body {
				padding: var( --content-padding-mobile, 20px );
			}
		}

		.is-list {
			row-gap: var( --row-gap-mobile );
		}

		.o-posts-grid-post-body {
			padding: var( --content-padding-mobile );

			.o-posts-grid-post-category {
				font-size: var( --meta-text-size-mobile );
			}

			.o-posts-grid-post-meta {
				font-size: var( --meta-text-size-mobile );
			}

			.o-posts-grid-post-title {
				a {
					font-size: var( --title-text-size-mobile );
				}
			}

			.o-posts-grid-post-description {
				p {
					font-size: var( --description-text-size-mobile );
				}

				.read-more {
					font-size: var( --description-text-size-mobile );
				}
			}
		}

		.is-grid {
			column-gap: var( --column-gap-mobile );
			row-gap: var( --row-gap-mobile );
		}

		.o-featured-container {
			.o-featured-post {
				margin-bottom: var( --row-gap-mobile );
			}
		}
	}
}
