games.scss

#games-page {
	#game-articles-section {
		display: grid;
		gap: 20px;
		grid-template-columns: 1fr 1fr;
		padding: 40px;

		.thumb-placeholder {
			height: 350px;
		}

		.game-thumb {
			min-width: 350px;
			overflow: hidden;
			height: 350px;
			background-position: center center;
			background-size: cover;
			background-repeat: no-repeat;
			image-rendering: pixelated;
			image-rendering: -moz-crisp-edges;
			image-rendering: crisp-edges;

			padding: 15px;
			transition: transform 0.3s, opacity 0.3s;
			display: flex;
			align-items: flex-end;
			opacity: .9;

			&:hover {
				transform: scale(1.03);
				opacity: 1;
			}

			.text-card {
				background-color: #0008;
				display: flex;
				flex-direction: column;
				padding: 20px;
				width: 100%;

				* {
					color: $light_0;
				}

				.game-title {
					font-size: 30px;
				}

				.game-subtitle {
					font-size: 17px;
					text-align: center;
				}

				.game-description {
					font-style: italic;
					padding: 10px 0;
				}
			}

		}

		@media screen and (max-width:790px) {
			grid-template-columns: 1fr;
			padding: 20px;

			.game-thumb {
				min-width: unset;
				width: 100%;
				height: 250px;

				.text-card {

					.game-title {
						font-size: 20px;
					}

					.game-subtitle {
						font-size: 14px;
					}
				}
			}
		}
	}
}