.grids {
	position: relative;
	overflow: hidden;

	&:before {
		content: " ";
		position: absolute;
		box-sizing: border-box;
		left: 0;
		top: 0;
		width: 200%;
		height: 200%;
		transform-origin: 0 0;
		transform: scale(0.5);
	}

	.grid {
		position: relative;
		float: left;
		padding: 20px 10px;
		width: 33.33333333%;
		box-sizing: border-box;
		text-decoration: none;
		color: var(--color-text);
		transition: 0.2s background-color;
	
		&:before {
			content: " ";
			position: absolute;
			right: 0;
			top: 0;
			width: 1px;
			height: 100%;
			transform-origin: 100% 0;
			transform: scaleX(0.5);
		}
	
		&:after {
			content: " ";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			-webkit-transform-origin: 0 100%;
			transform-origin: 0 100%;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
		}
	
		&.link:active {
			background-color: #F4F4F4;
		}

		[icon], [class^="icon-"] {
			width: 1.8rem;
			height: 1.8rem;
			margin: 0 auto;
			font-size: 1.8rem;
			display: block;
			color: var(--color-text);

			.app.dark & {
				color: var(--color-dark-text, #FFF);
			}
		
			img {
				display: block;
				width: 100%;
				height: 100%;
			}

			+ label{
				margin: 5px 0 0;
			}
		
			+ .grid_label {
				margin: 5px 0 0;
			}
		}
		
		[label], label {
			display: block;
			text-align: center;
			color: var(--text-color);
			font-size: 1rem;

			.app.dark & {
				color: var(--color-dark-text, #FFF);
			}
		}
	}

	&[small] .grid {
		width: 25%;
		padding: 15px 8px;
	}

	&[bordered] {
		&:before{
			border: 1px solid #D9D9D9;
			color: #D9D9D9;

			.app.dark & {
				border-color: rgba(255,255,255, 0.15);
				color: var(--color-dark-text, #FFF);
			}
		}

		.grid{
			&:before{
				border-right: 1px solid #D9D9D9;
				color: #D9D9D9;

				.app.dark & {
					border-color: rgba(255,255,255, 0.15);
					color: var(--color-dark-text, #FFF);
				}
			}

			&:after{
				border-bottom: 1px solid #D9D9D9;
				color: #D9D9D9;

				.app.dark & {
					border-color: rgba(255,255,255, 0.15);
					color: var(--color-dark-text, #FFF);
				}
			}
		}
	}
}