.step { margin-bottom: 15px; display: none; }
.step.active { display: block; }

#step3 { background: #FFF; border-radius: 6px; padding: 30px; }

.tiles { display: grid; gap: 20px; }
.tile { background: #FFF; border: 1px solid #e7e6e6; border-radius: 6px; box-shadow: 0 -3px #717171 inset; transition:all 0.5s ease; padding: 40px; font-size: 21px; text-align: center; position: relative; }
.tile span { display: block; font-size: 40px; }
.tile:hover { cursor: pointer; color: var(--hover-color); box-shadow: 0 -3px var(--hover-color) inset; }
.tile.selected { color: var(--hover-color); box-shadow: 0 -3px var(--hover-color) inset; }
.tile.selected:after { position: absolute; top: 12px; right: 12px; content: '\e86c'; color: var(--hover-color); }

.add-new-offer-elements { display: grid; gap: 10px; grid-template-columns: repeat(4,1fr); margin-bottom: 30px; }

@media screen and (min-width: 940px) {		
	#step2 .tiles { grid-template-columns: repeat(5,1fr); }
}

@media screen and (min-width: 620px) and (max-width: 800px) {
	.add-new-offer-elements { grid-template-columns: repeat(3,1fr); }
}

@media screen and (min-width: 640px) and (max-width: 939px) {
	#step2 .tiles { grid-template-columns: repeat(3,1fr); }
}

@media screen and (min-width: 440px) and (max-width: 639px) {
	#step2 .tiles { grid-template-columns: repeat(2,1fr); }	
}

@media screen and (min-width: 440px) {
	#step1 .tiles { grid-template-columns: repeat(2,1fr); }
}

@media screen and (min-width: 460px) and (max-width: 639px) {
	.add-new-offer-elements { grid-template-columns: repeat(2,1fr); }
}

@media screen and (max-width: 459px) {
	.add-new-offer-elements { grid-template-columns: repeat(1,1fr); }	
}