/*
 * SECTION:  Seller banner (Become a seller)
 * File:     assets/css/sections/sol-seller-banner.css
 * Used by:  Elementor container "sol-seller-banner" with "sol-seller-banner__text" and "sol-seller-banner__art" (home page template)
 * To remove: delete this file and its line in inc/assets.php (handle "sol-seller-banner").
 */
/*
 * The yellow panel color is set in Elementor on the "__art" container
 * (Style > Background), not here.
 */

.e-con.sol-seller-banner {
	--display: grid;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	padding: 0;
	background: var(--sol-surface-alt);
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius-md);
	overflow: hidden;
}

.e-con.sol-seller-banner__text,
.e-con.sol-seller-banner__art {
	padding: clamp(24px, 4vw, 44px);
}

.e-con.sol-seller-banner__text {
	align-items: flex-start;
	gap: 14px;
}

.e-con.sol-seller-banner__art {
	justify-content: center;
	gap: 10px;
}

.e-con.sol-seller-banner .elementor-widget {
	margin-block-end: 0;
}

.sol-seller-banner__text .elementor-widget-text-editor {
	max-width: 44ch;
	color: var(--sol-muted);
}

.sol-seller-banner__art .elementor-widget-text-editor {
	color: #242522;
	font-weight: 600;
}

@media (min-width: 800px) {
	.e-con.sol-seller-banner {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	}
}