.block-seen-in__title,
.block-seen-in__header h2 {
    font-family: var(--wp--preset--font-family--secondary);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1.5rem;
	text-align: center;
}

.block-seen-in__wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 20px;
	row-gap: 16px;
}

.block-seen-in__wrap img,
.editor-styles-wrapper .block-seen-in__wrap img {
	width: 100px;
	height: 48px;
	object-fit: contain;
}

.block-area-sidebar .block-seen-in__wrap {
	gap: 16px;
}

@media only screen and (min-width: 768px) {

	.block-seen-in__wrap {
		gap: 38px;
	}

	.page-id-108034 .entry-content .block-seen-in__wrap > * {
		flex-basis: calc(25% - 30px);
        width: 100%;
	}

	.page-id-108034 .entry-content .block-seen-in .block-seen-in__wrap img {
        max-width: none;
        max-height: none;
        height: auto;
		width: 100%;
    }
}

/* Blended style (class is-style-brass, Before Footer area): the title centred between two brass
   rules, the logos centred and sitting straight on the page in Ink: the #sgs-logo-ink SVG filter
   the block prints turns their black Ink and keeps white white, and multiply blending then drops
   the white into whatever is behind (ivory or linen), so JPG and PNG logo files alike blend in
   with no box around them. */
.block-seen-in.is-style-brass:not(.block-seen-in--label-beside) .block-seen-in__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	text-align: center;
	white-space: nowrap;
}
.block-seen-in.is-style-brass:not(.block-seen-in--label-beside) .block-seen-in__title::before,
.block-seen-in.is-style-brass:not(.block-seen-in--label-beside) .block-seen-in__title::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--wp--preset--color--quaternary);
}
.block-seen-in.is-style-brass .block-seen-in__wrap {
	justify-content: center;
}
.block-seen-in.is-style-brass .block-seen-in__wrap > div {
	line-height: 0;
}
.block-seen-in.is-style-brass .block-seen-in__wrap img {
	filter: url(#sgs-logo-ink);
	mix-blend-mode: multiply;
}

/* Phones: the blended logos go two per row, a step larger */
@media (max-width: 767px) {
	.block-seen-in.is-style-brass .block-seen-in__wrap {
		gap: 18px 24px;
	}
	.block-seen-in.is-style-brass .block-seen-in__wrap img,
	.editor-styles-wrapper .block-seen-in.is-style-brass .block-seen-in__wrap img {
		width: 130px;
		height: 56px;
	}
}

/* Blended, one row style (class is-style-row, sales pages): the Blended look (Brass Dark logos with no
   white boxes, title between brass rules) on a single line. The row is one logo tall and clips
   anything that would wrap, so logos that don't fit the width are simply left out; put the ones
   that matter most first. */
.block-seen-in.is-style-row:not(.block-seen-in--label-beside) .block-seen-in__title {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
	text-align: center;
	white-space: nowrap;
	color: var(--wp--preset--color--brass-dark);
	letter-spacing: 0.14em;
	font-size: 13px;
}
.block-seen-in.is-style-row:not(.block-seen-in--label-beside) .block-seen-in__title::before,
.block-seen-in.is-style-row:not(.block-seen-in--label-beside) .block-seen-in__title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--quaternary);
}
.block-seen-in.is-style-row .block-seen-in__wrap {
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 40px;
	height: 48px;
	overflow: hidden;
}
.block-seen-in.is-style-row .block-seen-in__wrap > div {
	line-height: 0;
}
.block-seen-in.is-style-row .block-seen-in__wrap img {
	filter: url(#sgs-logo-brass-dark);
	mix-blend-mode: multiply;
}
@media (max-width: 767px) {
	/* One row fits five logos on a desktop but only three on a phone, and the rest were clipped.
	   They stack instead, so every logo shows. */
	.block-seen-in.is-style-row .block-seen-in__wrap {
		gap: 18px 20px;
		height: auto;
		overflow: visible;
	}
	.block-seen-in.is-style-row .block-seen-in__wrap img {
		width: 84px;
		height: 40px;
	}

	/* Four logos or fewer do fit one line on a phone, a size down, and read better as a single
	   row than as a stack. The :nth-child(5) test is how the CSS counts them: with no fifth logo
	   the rule applies, and a fifth brings back the stack above. */
	.block-seen-in.is-style-row .block-seen-in__wrap:not(:has(> :nth-child(5))) {
		flex-wrap: nowrap;
		gap: 0 12px;
		justify-content: space-between;
	}

	/* A single logo (the Vitamix partner line on the Free Soup Challenge page) has nothing to
	   spread between, and space-between parks it on the left; it sits centred under the title. */
	.block-seen-in.is-style-row .block-seen-in__wrap:not(:has(> :nth-child(2))) {
		justify-content: center;
	}

	.block-seen-in.is-style-row .block-seen-in__wrap:not(:has(> :nth-child(5))) img {
		width: auto;
		max-width: 100%;
		height: 34px;
	}
}

/* Title position "Beside" (block setting): the title sits on the left and the logos run in one
   line to its right, left-aligned to the content column, instead of a centred title above them.
   Pairs with either Blended style. Phones: the title keeps its line and the logos follow under it. */
.block-seen-in--label-beside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* The label and the logos travel as one unit, centred on the page. Without this the row
	   starts at the left edge of the content column and trails off into empty space on the
	   right, which reads as a mistake rather than a choice. */
	justify-content: center;
	gap: 12px 28px;
}

.block-seen-in.block-seen-in--label-beside .block-seen-in__title {
	flex: none;
	/* No margin at all: a top margin would drop the label below the middle of the logo row */
	margin: 0;
	text-align: left;
	white-space: nowrap;
	/* The same label type as a page kicker ("Plant-based whole food recipes"): 13px, bold,
	   uppercase, 0.14em, Brass Dark */
	font-size: var(--wp--custom--caps--label);
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-dark);
}

/* The brass-logo filter lives in an inline <svg> between the label and the logos. It draws
   nothing, but as a flex child it still takes one of the row's gaps, so take it out of the flow. */
.block-seen-in.block-seen-in--label-beside > svg {
	position: absolute;
	width: 0;
	height: 0;
}

/* The logos take only the width they need, so the unit above can centre. Letting them grow
   would stretch the row back out to the full column and undo the centring. */
.block-seen-in.block-seen-in--label-beside .block-seen-in__wrap {
	flex: 0 1 auto;
	justify-content: flex-start;
}

/* Phones: "Beside" has nothing to sit beside once the row stacks, so the label and the logos
   both centre, like every other section heading on a sales page. */
@media only screen and (max-width: 767px) {
	.block-seen-in.block-seen-in--label-beside {
		justify-content: center;
	}

	.block-seen-in.block-seen-in--label-beside .block-seen-in__title {
		flex: 1 1 100%;
		text-align: center;
	}

	.block-seen-in.block-seen-in--label-beside .block-seen-in__wrap {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* Title position "Beside, under a line": a brass line across the top of the row, 32px above it
   (the home page's Meet Jen band). On phones, where the title is centred over the logos, the line
   becomes the rules either side of the title, so the title and line read as one unit. */
.block-seen-in--ruled {
	padding-top: 32px;
	border-top: 1px solid var(--wp--preset--color--quaternary);
}

@media only screen and (max-width: 767px) {
	.block-seen-in.block-seen-in--ruled {
		padding-top: 0;
		border-top: 0;
	}

	.block-seen-in.block-seen-in--ruled .block-seen-in__title {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.block-seen-in.block-seen-in--ruled .block-seen-in__title::before,
	.block-seen-in.block-seen-in--ruled .block-seen-in__title::after {
		content: "";
		flex: 1;
		height: 1px;
		background: var(--wp--preset--color--quaternary);
	}
}