// has to be implemented in alv-styleguide as well

.process {

	justify-content: center;

	.process__item {

		display: table;

		position: static;
		transform: none;

		color: $body-color;
		hyphens: auto;

		width: calc(25% - #{$margin-y-narrow*2});

		&.process__item--third:first-of-type {
			margin-left: 0 !important;
		}

		&:after {
			content: none;
			border: none;
		}

		@media screen and (min-width: 480px){
			&:last-child {
				margin-right: 0;

				&:after {
					border-width: 0;
					margin-top: 0;
				}
			}
		}

		&:hover {
			background: $brand-primary;
			color: theme-color('light') !important;
			text-decoration: none;
		}

		&:visited {
			color: $body-color;
		}

		p {
			margin: 0;
			display: table-cell;
			vertical-align: middle;
			position: static;
			transform: none;
		}


		@media screen and (max-width: 479px){
			width: 100%;
			margin: .25rem 0;

			p {
				position: static;
				transform: none;
			}
		}
	}
}

@media screen and (min-width: 480px) and (max-width: 1024px){
	.process {
		.process__item {
			font-size: $small-font-size;
			padding: ($margin-x-narrow/2) ($margin-y-narrow/2);
			width: calc(25% - #{$margin-y-narrow});
		}
	}
}