Как сделать что бы scale перекрывал border?

Question

kolykisel @kolykisel

CSS

Как сделать что бы scale перекрывал border?

Есть разметка html:

<div class="diseases-box">
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
					</div>

Есть стили css

.diseases-box
	display: flex
	justify-content: center
	flex-wrap: wrap
	margin-top: 71px
.disease-item
	width: 390px
	height: 130px
	text-align: center
	display: flex
	justify-content: center
	align-items: center
	border-right: 1px solid #ebebeb
	border-bottom: 1px solid #ebebeb
	text-align: left
	transition: $transition
	&:hover
		box-shadow: 0 10px 80px -30px #aa9fb7
		transform: scale(1.03)
		transform-origin: 50% 0
		border: 0
	&:hover .disease-item__view
		height: auto
		margin-top: 20px
		transition: $transition
	&:hover .disease-item__text
		color: #000
	&__text
		width: 180px
		font-size: 18px
		color: #502382
	&__view
		font-size: 14px
		color: #502382
		height: 0
		overflow: hidden
		transition: $transition
		&::after
			content: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='7' height='10' viewBox='0 0 7 10'%3e%3cpath fill='none' fill-rule='evenodd' stroke='%23502382' stroke-linecap='round' stroke-linejoin='round' d='M1 0l5 5-5 5'/%3e%3c/svg%3e")
			margin-left: 21px
			position: relative
			top: 1px

При наведении на каждый блок, почему почему то не перекрывает предыдущий border, подскажите куда капать, то уже что только не перепробовал, спасибо
Вот пример на codepen:
https://codepen.io/anon/pen/KOXmJa