/*
 * Elementor glue for WPDev Portfolio.
 * The sections keep their own styles from main.css. These rules only
 * remove Elementor's default spacing around the widgets and replace the
 * one layout rule that depended on sections being direct children of
 * .site-main.
 */

[class*="elementor-widget-wpdev_"] {
	width: 100%;
	max-width: 100%;
	margin: 0;
}
[class*="elementor-widget-wpdev_"] > .elementor-widget-container {
	margin: 0;
	padding: 0;
}
.e-con > [class*="elementor-widget-wpdev_"] {
	--widgets-spacing: 0px;
	--widgets-spacing-row: 0px;
	--widgets-spacing-column: 0px;
}
.elementor [class*="elementor-widget-wpdev_"] section {
	padding-block: clamp(4rem, 9vw, 7.5rem);
}

/* Scroll-reveal would leave sections invisible inside the Elementor editor. */
.elementor-editor-active [data-animate],
.elementor-editor-preview [data-animate] {
	opacity: 1 !important;
	transform: none !important;
}

/* Optional replacement images for the hero and about illustrations. */
.hero__image,
.about__image {
	position: relative;
	z-index: 1;
	margin: 10% auto 0;
	width: min(88%, 460px);
}
.hero__image img,
.about__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: 0 28px 70px rgba(32, 58, 42, 0.28);
}
.about__image { margin-top: 0; }