html:has(.steps),
body:has(.steps) {
	max-width: 100%;
	overflow-x: hidden;
}

.steps {
	box-sizing: border-box;
	position: relative;
	display: flex;
	width: 100%;
	min-height: 100svh;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(4rem, 8vw, 7rem);
	isolation: isolate;
	background: var(--wp--preset--color--ivory, #f9f0eb);
	border-bottom: 1px solid var(--wp--preset--color--black, #000);
}
.steps__inner {
	display: flex;
	width: min(calc(100% - 2rem), var(--wp--style--global--wide-size, 73.75rem));
	flex-direction: column;
	align-items: center;
	gap: 0;
	margin-inline: auto;
}

.steps__title {
	width: min(100%, 60rem);
	text-align: center;
}

.steps__title * {
	-webkit-text-stroke: 0.8px #000;
}

.steps__title > :first-child {
	margin-top: 0;
}

.steps__title > :last-child {
	margin-bottom: 0;
}

.steps__message {
	--steps-frame-width: min(60vw, 45rem);
	position: relative;
	display: grid;
	width: 100%;
	min-height: clamp(31rem, 57vw, 46rem);
	place-items: center;
}

.steps__frame,
.steps__tags-cloud {
	box-sizing: border-box;
	width: var(--steps-frame-width);
	aspect-ratio: 3 / 2;
}

.steps__frame {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--black, #000);
	border-radius: clamp(1rem, 2vw, 2rem);
	background: var(--wp--preset--color--ivory, #f9f0eb);
}

.steps__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.steps__tags-cloud {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.steps__tag {
	position: absolute;
	z-index: 1;
	display: grid;
	width: clamp(7.5rem, 11vw, 9.5rem);
	aspect-ratio: 1;
	place-items: center;
}

.steps__tag:nth-of-type(6n + 1) { top: 2%; left: 0; transform: translate(-50%, 20%) rotate(20deg); }
.steps__tag:nth-of-type(6n + 2) { top: 0; left: 50%; transform: translate(-50%, -50%) rotate(8deg); }
.steps__tag:nth-of-type(6n + 3) { top: 15%; right: 5%; transform: rotate(-4deg); }
.steps__tag:nth-of-type(6n + 4) { right: 30%; bottom: 0; transform: translate(30%, 30%) rotate(7deg); }
.steps__tag:nth-of-type(6n + 5) { bottom: 0; left: 8%; transform: translateY(20%) rotate(-9deg); }

.steps__connector {
	position: absolute;
	z-index: 0;
	display: block;
	width: clamp(5rem, 10vw, 9.625rem);
	pointer-events: none;
}

.steps__connector svg {
	display: block;
	width: 100%;
	height: auto;
}

.steps__connector--1 {
    top: -6%;
    left: 12%;
    transform: rotate(9deg);
}

.steps__connector--2 {
    top: -2%;
    right: 20%;
    transform: rotate(55deg);
}

.steps__connector--3 {
	right: 9%;
    bottom: 26%;
    transform: rotate(144deg);
}

.steps__connector--4 {
    bottom: 2%;
    left: 31%;
    transform: rotate(208deg);
}

.steps__connector--5 {
	bottom: 20%;
	left: 0;
	transform: rotate(230deg);
}

.steps__tag-shape {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.steps__tag-content {
	position: relative;
	z-index: 1;
	width: 66%;
	font-size: clamp(0.7rem, 1.1vw, 1rem);
	font-weight: 700;
	line-height: 1.05;
	text-align: center;
	pointer-events: auto;
}

.steps--tags-animation-ready .steps__tag:not(.steps__tag--visible),
.steps--tags-animation-ready .steps__tag-content:not(.steps__tag-content--visible),
.steps--tags-animation-ready .steps__connector:not(.steps__connector--visible) {
	opacity: 0;
}

.steps__tag-content > :first-child {
	margin: 0;
	-webkit-text-stroke: 0.8px #000;
}
.steps__tag-content > :first-child span{
	font-size: 30px!important;
}
.steps__tag-content h3{
	margin-top: 0;
	margin-bottom: 0.25rem;
	line-height: 0.8;
}
.steps__tag-content p {
	font-weight: 400;
}

.steps__tag-content > :last-child {
	margin-bottom: 0;
	margin-top: 0.25rem;
	line-height: 0.8!important;
}
.steps__tag-content > :first-child {
	font-family: var(--wp--preset--font-family--new-science-extended);
	font-weight: 700;
}

.steps__action {
	align-self: center;
	margin-top: calc(clamp(1rem, 3vw, 2rem) * -1);
}

.steps__empty {
	padding: 2rem;
	border: 1px dashed currentcolor;
	text-align: center;
}
@media(max-width: 1280px) {
	.steps-reduce .steps__tag-content > :first-child span{
		font-size: 25px!important;
	}
	.steps-reduce .steps__tag-content h3 span{
		font-size: 11px!important;
	}
	.steps-reduce .steps__tag-content p:first-child{
		line-height: 0.8!important;
	}
	.steps-reduce .steps__tag-content p:last-child span{
		font-size: 10px!important;
	}
}

@media (max-width: 700px) {
	.steps {
		min-height: 0;
		padding-block: 4rem;
	}

	.steps__message {
		--steps-frame-width: min(78vw, 25rem);
		min-height: clamp(30rem, 125vw, 42rem);
	}

	.steps__tag {
		width: clamp(6.75rem, 31vw, 8rem);
	}

	.steps__connector {
		width: clamp(4rem, 24vw, 7rem);
	}
	.steps__connector--2 {
		top: 25%;
		right: -10%;
		transform: rotate(110deg);
	}
	.steps__connector--1 {
		top: -1%;
		left: 30%;
		transform: rotate(9deg);
	}
	.steps__connector--3 {
		right: -2%;
		bottom: 20%;
		transform: rotate(144deg);
	}

	.steps__connector--4 {
		bottom: 11%;
		left: 8%;
		transform: rotate(249deg);
	}

}

@media (max-width: 520px) {
	.steps::after {
		height: 3rem;
	}

	.steps__frame,
	.steps__tags-cloud {
		aspect-ratio: 1 / 2;
	}

	.steps__tag:nth-of-type(6n + 1) { top: 0; left: 0; transform: translate(-20%, 20%) rotate(20deg); }
	.steps__tag:nth-of-type(6n + 2) { top: 0; right: 0; left: auto; transform: translate(40%, -20%) rotate(8deg); }
	.steps__tag:nth-of-type(6n + 3) { top: 50%; right: 0; transform: translate(25%, -50%) rotate(-4deg); }
	.steps__tag:nth-of-type(6n + 5) { bottom: 10%; left: 0; transform: translate(-20%, 20%) rotate(-9deg); }
	.steps__tag:nth-of-type(6n + 2) {
        top: 0;
        right: 0;
        left: auto;
        transform: translate(20%, -20%) rotate(8deg);
    }
	.steps__tag:nth-of-type(6n + 5) {
        bottom: 33%;
        left: 0;
        transform: translate(-20%, 20%) rotate(-9deg);
    }

	.steps__tag-content h3 span{
		font-size: 12px!important;
	}
	.steps__inner {
		gap: 5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.steps--tags-animation-ready .steps__tag,
	.steps--tags-animation-ready .steps__tag-content,
	.steps--tags-animation-ready .steps__connector {
		opacity: 1;
	}
}