/**
 * Blog+ for Divi 4.
 *
 * Divi's grid Blog normally hands its articles to Salvattore, which groups
 * them into fixed columns whose widths and margins depend on the enclosing
 * row's gutter setting. Blog+ builds independent masonry columns: CSS Grid
 * controls their horizontal spacing and each column controls its own vertical
 * spacing.
 */

.dbp-blog-plus .et_pb_blog_grid .et_pb_salvattore_content {
	display: grid !important;
	grid-template-columns: repeat(var(--dbp-columns-desktop, 3), minmax(0, 1fr)) !important;
	column-gap: var(--dbp-gap-x-desktop, 30px) !important;
	row-gap: 0 !important;
	align-items: start;
}

/* Fallback while Divi and Blog+ initialise their scripts. */
.dbp-blog-plus .et_pb_blog_grid .et_pb_salvattore_content[data-columns]::before {
	position: absolute !important;
	visibility: hidden !important;
	overflow: hidden !important;
	width: 0 !important;
	height: 0 !important;
	content: "1 .column.size-1of1" !important;
}

.dbp-blog-plus .et_pb_blog_grid .et_pb_salvattore_content > .dbp-column,
.dbp-blog-plus .et_pb_blog_grid .et_pb_salvattore_content > .column {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	row-gap: var(--dbp-gap-y-desktop, 30px) !important;
	align-content: start;
	float: none !important;
	box-sizing: border-box !important;
	min-width: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
}

.dbp-blog-plus .dbp-card {
	display: block !important;
	box-sizing: border-box !important;
	min-width: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	isolation: isolate;
}

/*
 * One article is one indivisible card. Overflow is clipped at the article
 * boundary so Divi's full-bleed image margins cannot enter a neighbouring
 * column.
 */
.dbp-blog-plus .dbp-card > article.et_pb_post,
.dbp-blog-plus .et_pb_blog_grid .et_pb_salvattore_content > article.et_pb_post,
.dbp-blog-plus .et_pb_blog_grid .et_pb_salvattore_content > .column > article.et_pb_post {
	display: block !important;
	float: none !important;
	clear: both !important;
	box-sizing: border-box !important;
	min-width: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	overflow: hidden;
}

.dbp-blog-plus .dbp-card .et_pb_image_container {
	float: none !important;
	box-sizing: border-box !important;
	max-width: none !important;
}

.dbp-blog-plus .et_pb_image_container .entry-featured-image-url,
.dbp-blog-plus .entry-featured-image-url {
	display: block;
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.dbp-blog-plus .et_pb_image_container img,
.dbp-blog-plus .entry-featured-image-url img,
.dbp-blog-plus img.et_pb_post_main_image {
	display: block;
	width: 100% !important;
	max-width: 100%;
	height: auto;
}

.dbp-blog-plus .more-link {
	display: var(--dbp-more-display, inline-block);
	margin-top: var(--dbp-more-margin-top, 0);
}

.dbp-blog-plus .more-link.et_pb_button {
	text-decoration: none;
}

@media only screen and (max-width: 980px) {
	.dbp-blog-plus .et_pb_blog_grid .et_pb_salvattore_content {
		grid-template-columns: repeat(var(--dbp-columns-tablet, 2), minmax(0, 1fr)) !important;
		column-gap: var(--dbp-gap-x-tablet, 30px) !important;
	}

	.dbp-blog-plus .et_pb_blog_grid .et_pb_salvattore_content > .dbp-column,
	.dbp-blog-plus .et_pb_blog_grid .et_pb_salvattore_content > .column {
		row-gap: var(--dbp-gap-y-tablet, 30px) !important;
	}
}

@media only screen and (max-width: 767px) {
	.dbp-blog-plus .et_pb_blog_grid .et_pb_salvattore_content {
		grid-template-columns: repeat(var(--dbp-columns-phone, 1), minmax(0, 1fr)) !important;
		column-gap: var(--dbp-gap-x-phone, 30px) !important;
	}

	.dbp-blog-plus .et_pb_blog_grid .et_pb_salvattore_content > .dbp-column,
	.dbp-blog-plus .et_pb_blog_grid .et_pb_salvattore_content > .column {
		row-gap: var(--dbp-gap-y-phone, 30px) !important;
	}
}