.v-category {
	display: grid;
	margin: 2rem auto;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: 1rem;
	&__group {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// margin-right: 10px;
		// margin-bottom: 10px;
		justify-content: space-around;
		padding: 1rem 0;
		overflow: hidden;
		@include gradient-gen($primary);
		@include boxshadow-md($primary);
		color: $primary-text;
		border-radius: 8px;
		-webkit-tap-highlight-color: transparent;
		cursor: pointer;
		span {
			font-size: 5rem;
			z-index: 2;
		}
		&::before {
			position: absolute;
			content: '';
			transition: all 0.35s ease;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: rgba(white, 0.2);
			transform: translateX(-120%);
			z-index: 1;
		}
		&:hover {
			&::before {
				transform: translateX(0%) skew(25deg);
			}
		}
	}
	&__title {
		z-index: 2;
		font-size: 14px;
		font-weight: 400;
		text-transform: uppercase;
	}
}

@media (max-width: 1200px) {
	.v-category {
		grid-template-columns: repeat(4, 1fr);
		&__group {
			&:nth-child(1) {
				grid-column: 1 / span 2;
			}
			&:nth-child(2) {
				grid-column: 3 / span 2;
			}
		}
	}
}

@media (max-width: 576px) {
	.v-category {
		grid-template-columns: repeat(3, 1fr);
		&__group {
			&:nth-child(1) {
				grid-column: 1 / span 2;
			}
			&:nth-child(2) {
				grid-column: 3;
			}
			&:nth-child(3) {
				grid-column: 1 / span 3;
			}
			span {
				font-size: 4rem;
			}
		}
	}
}