.quickmenu {
	margin-top: grid(2);
	&__title {
		h1 {
			font-size: grid(50/60);
		}
	}
	&__grid {
		margin-top: grid(1);
		margin-bottom: grid(2);
	}
	.cat-column {
		&+.cat-column{
			margin-left: grid(.5)
		}
		@media #{$mobile} {
			margin: 0 grid(.5) grid(1);
		}
		.main-category, .sub-category {
			position: relative;
			padding: grid(.4);
			transition: $transition $bezier;
			&[category='brand']{
				.category-icon {
					background: color(Matiseblue);
				}
			}
			&[category='code']{
				.category-icon {
					background: color(Blue);
				}
			}
			&[category='guides']{
				.category-icon {
					background: color(Green);
				}
			}
			// TODO: dit mooier en beter maken
			&:hover{
				svg {
					transform: rotate(180deg);
					transition: $transition $bezier;
				}
			}
			a {
				display: flex;
				align-items: center;
				flex-direction: row;
				height: grid(40/60);
				min-height: max-content;
				h2, h3 {
					display: inline-block;
				}
				&+ p {
					margin-top: rem(10);
				}
			}
		}
		.sub-category {
			margin-top: grid(.3);
			box-shadow: rem(0 0 20 10) color(Black, .05);
		}


		a:before {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			top:0;
			left: 0;
		}
	}
}