explainegy-nextjs/styles/modules/Category.module.scss

@import "../variables.scss";
.category {
	h1 {
		text-align: center;
		font-size: 1.5em;
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 50px;
		row-gap: 50px;
		padding: 0px 20px 0 20px;
		.showcase {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			gap: 10px 10px;

			@media (max-width: $category-breakpoint-1) {
				grid-template-columns: 1fr 1fr;
			}

			@media (max-width: $category-breakpoint-2) {
				grid-template-columns: 1fr;
			}
			h2 {
				font-size: 1em;
				grid-column: 1 / -1;
			}

			a {
				background-color: rgba(126, 126, 126, 0.1);
				box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.1);
				padding: 20px;
				transition: all 50ms linear;
				text-overflow: ellipsis;
				max-width: 300px;
				&:hover {
					background-color: rgba(126, 126, 126, 0.2);
					box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.2);
				}
			}
		}

		.smallShowcase {
			@media (max-width: $category-breakpoint-2) {
				& > a:nth-child(n + 5) {
					display: none;
				}
			}
		}
	}
}