explainegy-nextjs/styles/CategoryList.module.scss

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

	.content {
		margin-top: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		.grid {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			gap: 10px 30px;

			@media (max-width: $categoryList-breakpoint-1) {
				grid-template-columns: 1fr 1fr;
				gap: 10px 10px;
			}

			@media (max-width: $categoryList-breakpoint-2) {
				grid-template-columns: 1fr;
				width: 100%;

				padding: 0px 20px 0 20px;
			}

			.linkContainer {
				aspect-ratio: 14/9;
				width: 250px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				@media (max-width: $categoryList-breakpoint-2) {
					width: 100%;
				}

				a {
					text-align: center;
					aspect-ratio: 14/9;
					width: 230px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					row-gap: 20px;
					background-color: #384d54;
					color: white;
					font-size: 0.8em;
					transition: all 100ms linear;

					&:hover {
						box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.481);
						color: white !important;
						text-decoration: none !important;
						width: 250px;
						row-gap: 30px;
						.svgContainer {
							svg {
								width: 70px;
								height: 70px;
							}
						}
					}

					@media (max-width: $categoryList-breakpoint-2) {
						font-size: 1.2em;
						width: 95%;
						&:hover {
							box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0);
							width: 100%;

							.svgContainer {
								svg {
									width: 90px;
									height: 90px;
								}
							}
						}
					}

					.svgContainer {
						width: 70px;
						height: 70px;
						@media (max-width: $categoryList-breakpoint-2) {
							width: 90px;
							height: 90px;
						}
						svg {
							transition: all 100ms linear;
							fill: rgb(255, 255, 255);
							width: 60px;
							height: 60px;

							@media (max-width: $categoryList-breakpoint-2) {
								width: 80px;
								height: 80px;
							}
						}
					}
				}
			}
		}
	}
}