/**
 * UI/UX service — design process horizontal scroll on mobile/tablet.
 */

.design-process-section.section {
	overflow: visible;
}

@media screen and (max-width: 991px) {
	.design-process-section .w-container {
		overflow: visible;
	}

	.design-process-content-wrap {
		overflow: visible;
	}

	.design-process-grid {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		overflow-x: auto;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 20px;
		grid-template-columns: none !important;
		grid-row-gap: 0;
		column-gap: 16px;
		width: calc(100% + 40px);
		max-width: none;
		margin-left: -20px;
		margin-right: -20px;
		padding-top: 40px;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 8px;
		scrollbar-width: thin;
		scrollbar-color: rgba(94, 67, 254, 0.45) transparent;
	}

	.design-process-grid::-webkit-scrollbar {
		height: 6px;
	}

	.design-process-grid::-webkit-scrollbar-track {
		background: transparent;
	}

	.design-process-grid::-webkit-scrollbar-thumb {
		border-radius: 999px;
		background: rgba(94, 67, 254, 0.45);
	}

	.design-process-item {
		flex: 0 0 min(280px, 78vw);
		width: min(280px, 78vw);
		scroll-snap-align: start;
		overflow: visible;
	}

	.design-process-item-number-wrap {
		margin-top: -34px;
		margin-left: 0;
		position: relative;
		z-index: 1;
	}

	.design-process-item-title-wrap {
		max-width: none;
	}
}

@media screen and (max-width: 479px) {
	.design-process-grid {
		column-gap: 12px;
	}

	.design-process-item {
		flex-basis: min(260px, 82vw);
		width: min(260px, 82vw);
	}
}