.productsteps {
	display: flex;
	flex-flow: row wrap;
	gap: 20px 40px;
	padding: 40px;
}

@media (min-width: 1040px) {
	.productsteps {
		max-width: 1040px;
		margin: 0 auto;
		padding: 40px 0;
	}
}

.productsteps .productstep-dummy {
	display: none;
}

.productstep {
	width: 100%;
	display: grid;
	grid-template-columns: 82px 1fr;
	grid-template-rows: 82px 1fr;
	grid-template-areas: "stepicon steptitle"
						"steptext steptext";
	gap: 10px 15px;
}

@media (min-width: 1040px) {
	.productstep {
		gap: 10px 20px;
		max-width: calc((100% - 40px) / 2);
		grid-template-columns: 93px 1fr;
		grid-template-rows: 20px minmax(53px, 1fr);
		grid-template-areas: "stepicon steptitle"
							"stepicon steptext";
	}
}

@media (min-width: 1040px) {
	.productstep[data-steporder="1"] {
		order: 1;
	}
	.productstep[data-steporder="2"] {
		order: 3;
	}
	.productstep[data-steporder="3"] {
		order: 5;
	}
	.productstep[data-steporder="4"] {
		order: 2;
	}
	.productstep[data-steporder="5"] {
		order: 4;
	}
	.productstep[data-steporder="6"] {
		order: 6
	}
}


h4.productstep-title {
	grid-area: steptitle;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 16px;
	align-self: center;
}

@media (min-width: 1040px) {
	h4.productstep-title {
		font-size: 18px;
		align-self: stretch;
	}
}

.productstep > img {
	grid-area: stepicon;
}

.productstep-text {
	grid-area: steptext;
}