@import url('_site.css');

.cards {
	row-gap: 12px;
}

.tool {
	position: relative;
	transition: all .1s ease-in-out;
	border-width: 3px;
	border-radius: 12px;
	text-align: center;
	height: 12em;

	&:hover {
		transform: scale(1.05);
		border-color: var(--color-site);
		background-color: #f0f0f0;
		color: var(--color-site);
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	.icon {
		position: relative;
		margin-top: 1em;
		margin-bottom: 1em;

		span {
			font-size: 6rem;
		}
	}

	.info {
		height: 3em;
	}

	&.beta {
		&:hover {
			color: black;
			border-color: #ff8080;
		}

		.icon {
			color: #808080;
		}

		.icon::after {
			position: absolute;
			pointer-events: none;
			left: 50%;
			top: 50%;
			text-align: center;
			content: 'BETA';
			transform: translate(-50%, -50%) rotate(-30deg);
			font-size: 400%;
			font-weight: bold;
			color: #c00000;
		}
	}
}