.game {
	main {
		display: grid;
		grid-template-areas: "header header" "screenshots stuff";
		text-align: left;
		border-bottom: 1px var(--accent) solid;
		padding-bottom: 0;
		
		h2 {
			margin: 0;
			
			a {
				font-size: .9rem;
				margin-left: 10px;
				display: inline-block;
				vertical-align: middle;
			}
		}
		
		h3 {
			margin: 0;
		}
		
		.blurb {
			margin: 1em 0;
		}
		
		.game-header {
			margin: -20px -20px 0;
			width: calc(100% + 40px);
			border-bottom: 1px var(--accent) solid;
			padding: 20px;
			text-align: left;
			grid-area: header;
		}
		
		.jamsub {
			font-size: .8em;
			font-style: italic;
			color: color-mix(in srgb-linear, var(--foreground), var(--background) 15%);
			margin: 0;
		}
	}
	
	.screenshots {
		border-right: 1px var(--accent) solid;
		grid-area: screenshots;
		padding: 20px;
		
		.gallery {
			display: grid;
			gap: 10px;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: auto;
			grid-template-areas: "featured featured";
			
			a, button {
				position: relative;
				padding-top: 75%;
				width: 100%;
				
				img {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
			
			& > :first-child {
				grid-area: featured;
			}
		}
	}
	
	.interaction {
		grid-area: stuff;
	}
	
	.downloads {
		padding: 20px;
		
		ul {
			list-style: none;
			margin: 1em 0;
			padding: 0;
			
			li {
				margin-bottom: 10px;
			}
		}
		
		.size {
			color: color-mix(in srgb-linear, var(--foreground), var(--background) 20%);
		}
		
		.platforms-label {
			display: inline-block;
			width: 1px;
			overflow: hidden;
			text-indent: -999px;
		}
		
		.icon {
			width: 24px;
			height: 24px;
			background-color: color-mix(in srgb-linear, var(--foreground), var(--background) 20%);
		}
	}
	
	.comments {
		border-top: 1px var(--accent) solid;
	}
}