#tip {
	display:block;
	margin:1em 0;
	text-align:center;
	font-size:0.8em;
	font-style:italic;
	opacity:0.8
}

#group1 {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1em;
	padding:0 1em;
	& > .box {
		display:grid;
		grid-template-rows:auto 250px 1fr;
		margin:0;
		&:has(#news) > h1.new {animation:newsflash 1.7s ease alternate infinite}
		& #news {
			height:250px;
			overflow:hidden;
			mask-image:linear-gradient(0deg,#fff0 5%,#fff4 40%,#ffff 70%);
			&:has(.loading:only-child) {align-content:center;mask-image:none}
			& .loading {display:block;text-align:center}
			& > h2 {
				position:relative;
				margin:0 0 1em 0;
				font-size:1.25rem;
				& > span {
					display:block;
					font-size:0.8rem;
				}
			}
			& > div {
				& > :first-child{margin-top:0}
				& > :last-child {margin-bottom:0}
				& img {display:none}
			}
		}
		& #event {
			overflow:hidden auto;
			&:has(h2:only-child), &:has(.loading:only-child) {align-content:center}
			& .loading {display:block;text-align:center}
			& > h2 {
				position:relative;
				margin-bottom:1rem;
				text-align:center;
				font-size:1.2rem;
				& > span {
					display:block;
					font-size:0.8rem
				}
			}
			& > img {
				display:block;
				margin:auto;
				max-width:100%;
				height:200px;
				border:var(--border);
				&:not(:first-of-type) {margin-top:1em}
				&.placeholder {height:150px}
			}
		}
		& > .footer {
			align-content:center;
			display:block;
			padding:1em;
			background:url('/assets/mat-bg-section.png');
			border-top:var(--border);
			text-align:center
		}
		& #event-footer .countdown {color:#ff0}
	}
}

#gallery {
	display:block;
	height:256px;
	margin:1em;
	border:var(--border);
	overflow:hidden;
	& > div {
		display:flex;
		flex-direction:row;
		align-content:center;
		height:inherit;
		width:max-content;
		overflow:visible hidden;
		white-space:nowrap;
		animation:marquee 60s linear infinite;
		& img {
			display:block;
			max-height:100%;
			filter:brightness(0.5);
			&:hover {filter:brightness(1)}
			&:active {filter:brightness(0.25)}
		}
	}
}

@keyframes marquee {
	0% {transform:translateX(0%)}
	100% {transform:translateX(-50%)}
}

@keyframes newsflash {0%{color:var(--cTEXT)}100%{color:#ff0}}

.box:has(#updates) {
	grid-template-rows:auto 10lh auto;
	& > div:not(#updates-controls) {
		height:10lh;
		padding:0;
		overflow:hidden auto
	}
	& #updates-controls {
		display:grid;
		grid-template-columns:1fr auto 1fr;
		column-gap:4em;
		width:100%;
		border-top:var(--border);
		background:url('/assets/mat-bg-section.png');
		font-size:0.8em;
		& > span {
			display:inline-block;
			width:max-content;
			padding:1em;
			&.clickable {
				cursor:pointer;
				user-select:none;
				&:hover {text-decoration:underline}
				&:active {opacity:0.25}
				&.disabled {pointer-events:none;opacity:0.5}
			}
			&:nth-child(1) {margin-left:auto}
		}
	}
	& #updates {
		& ul li {
			margin:0.25em 0;
			&::marker {content:'–  '}
		}
		& noscript {display:block;margin:1em;text-align:center}
	}
	&:has(noscript) #updates-controls > span.clickable {opacity:0;pointer-events:none}
}

#footer {
	margin:1em 0;
	& > img {
		display:block;
		margin:1em auto;
	}
	& > span {
		display:block;
		text-align:center;
		font-size:0.8em;
		font-style:italic;
		opacity:0.5
	}
}

@media only screen and (width<=960px) {
	#group1 {
		display:block;
		padding:0;
		& .box:has(#event) {margin-top:1em}
		& #event-footer {font-size:3vw}
	}
}