games.scss

#games-page {
	.game-articles {
		article {
			display: grid;
			grid-template-columns: 0.7fr 1fr;
			gap: 30px 50px;
			margin: 20px 0;
			&.game-article {
				grid-template-rows: repeat(7, auto);
				width: 100%;
				.game-title {
					grid-column: 1 / span 2;
					margin: 0;
					padding: 30px 20px;
					color: $light_2;
					font-size: 35px;
					font-style: italic;
				}

				.game-banner {
					grid-column: 1 / span 2;
					@include flex-center-col;
					background-color: black;
					overflow: hidden;
					height: 300px;
					img {
						width: 100%;
					}
				}

				.game-tags {
					display: flex;
					gap: 10px;
					flex-wrap: wrap;
					margin: 10px 20px;
					span {
						font-size: 12px;
						padding: 4px;
						background-color: $light_0;
						color: $medium_grey;
						border-radius: 5px;
						font-weight: 600;
					}
				}

				.game-subtitle {
					grid-column: 1;
					margin: 10px 20px;
					color: $medium_grey;
				}
				.game-description {
					grid-column: 1;
					text-align: justify;
					margin: 10px 20px 30px;
				}

				.image-carousel {
					grid-column: 2;
					grid-row: 3 / span 4;
					height: 400px;
				}
			}
			&.placeholder {
				* {
					background-color: $light_0;
				}
				height: 400px;
			}
			@media screen and (max-width: $screen_l) {
				grid-template-columns: 1fr;
				&.game-article {
					grid-template-rows: repeat(6, auto);
					.game-title {
						grid-column: 1;
						padding: 0;
						font-size: 25px;
					}

					.game-banner {
						grid-column: 1;
						margin: 0 -20px;
						height: 200px;
					}

					.image-carousel {
						grid-column: 1;
						grid-row: 3;
						margin: 0 -20px;
					}
				}
			}
			.play-button {
				border: none;
				background-color: unset;
				font-weight: bold;
				font-size: 20px;
				cursor: pointer;
				color: $blue_2;
				&:hover {
					color: $blue_3;
				}
			}
		}
	}
}