#intro_banner{width: 100%; display: grid; grid-template-rows: auto 0; overflow: hidden;}
#intro_banner > img{height: 500px; transition: height 1s;}
#intro_banner > div{height: fit-content; background: linear-gradient(0deg, var(--colour_02), transparent); color: var(--colour_07); padding: 32px; position: relative; bottom: calc(64px + 2rem);}
#intro_banner > div h2{font-size: 2rem;}

#content{padding: 32px; display: grid; gap: 32px;}
#content > div > h3{font-size: 1rem; color: var(--colour_04); margin-bottom: 8px; text-decoration: underline; text-underline-offset: 3px;}
#content > div > pre,
#content > div > p{font-size: 1.1rem; color: var(--colour_07);}

#content #media_gallery{background: black; padding: 16px; border-radius: 8px;}
#content #media_gallery .img_scroller{padding: 32px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-height: 600px; overflow: auto;}
#content #media_gallery .img_scroller > img{max-height: 200px; width: auto; border-radius: 8px;}

#comments{background: black; padding: 64px;}
#comments h3{border-bottom: 1px solid;}

#user_comments{display: grid; gap: 16px; padding: 16px 16px 16px 0; border-bottom: 1px solid; max-height: 600px; overflow: auto;}
#user_comments > div{background: var(--colour_01); border-radius: 8px 16px 16px 8px; padding: 16px; border-left: 6px solid var(--colour_06); display: grid; gap: 16px;}
#user_comments > div:hover{background: var(--colour_02);}

#user_comments > div > div:nth-child(1){display: grid; grid-template-columns: auto 1fr auto; gap: 16px;}
#user_comments > div > div:nth-child(1) > img{width: 48px; height: 48px; background: var(--colour_09); border-radius: 50px;}
#user_comments > div > div:nth-child(1) > h4{font-size: 1.2rem; color: var(--colour_04); border-bottom: 1px solid; align-self: center; justify-self: left;}
#user_comments > div > div:nth-child(1) > small{display: block; text-align: right; color: var(--colour_07);}
#user_comments > div > div:nth-child(2) > pre{color: var(--colour_07); padding: 16px; background: var(--colour_03); border-radius: 4px;}

#user_comments .img_scroller{padding: 8px; display: flex; width: 100%; gap: 8px; overflow: auto; display: none;}
#user_comments .img_scroller > img{height: 100px; border-radius: 8px;}

fieldset{padding: 32px; border-radius: 8px; display: grid; gap: 32px; background: linear-gradient(25deg, rgb(70, 13, 70), rgb(38, 26, 32));}
fieldset > legend{padding: 16px; background: var(--colour_02); border-radius: 8px; outline: 2px solid white;}

@media (max-width: 800px) {
	#intro_banner > img{height: 500px;}
	#comments{padding: 32px;}
	#comments form{padding: 32px 0;}
	#content #media_gallery .img_scroller{display: grid;}
	#content #media_gallery .img_scroller > img{width: 100%; max-height: 100%;}
	#user_comments > div > img{width: 32px; height: 32px;}
	#user_comments > div > div > pre{text-wrap: wrap;}
}