@media screen and (max-width:1300px){
	.main {
		width: calc(100% - 32px);
	}
	.banner {
		height: 160px;
	}
}

@media screen and (max-width:1200px){
	.main {
		width: calc(100% - 32px);
	}
	.banner {
		height: 155px;
	}
}

@media screen and (max-width:1100px){
	.main {
		width: calc(100% - 32px);
	}
	nav .container > div > ul > li > a {
		padding: 20px 10px;
	}
	.banner {
		height: 145px;
	}
}

@media screen and (max-width: 940px) {
	.main {
		width: calc(100% - 32px);
		margin: 16px auto;
	}

	nav .container {
		align-items: flex-start;
		flex-wrap: wrap;
		padding: 5px 8px;
	}

	nav .container > div > ul > li > a {
		padding: 12px 9px;
	}

	.feedContainer {
		gap: 14px;
	}
}

@media screen and (max-width: 680px) {
	.main {
		width: calc(100% - 20px);
		margin: 10px auto;
	}

	nav .container {
		display: block;
	}

	nav .container > div {
		float: none;
	}

	nav .container > div > ul {
		display: flex;
		flex-wrap: wrap;
	}

	nav .container > div > ul > li > a {
		padding: 10px 9px;
		font-size: 13px;
	}

	.banner {
		height: 120px;
		min-height: 120px;
		margin-top: 12px;
		border-radius: 10px;
		background-size: auto 100%;
	}

	.heroIntro {
		display: block;
		margin-bottom: 12px;
		padding: 13px;
		border-radius: 0 0 10px 10px;
	}

	.heroIntro h1 {
		font-size: 18px;
	}

	.heroIntro .heroAction {
		display: inline-block;
		margin-top: 10px;
		padding: 8px 11px;
	}

	.feedContainer {
		display: block;
		margin: 10px 0;
		padding: 8px;
		border-radius: 10px;
	}

	.leftPane,
	.rightPane {
		width: 100%;
	}

	.rightPane {
		margin-top: 10px;
		padding-top: 10px;
		padding-left: 0;
		border-top: 1px solid var(--border);
		border-left: 0;
	}

	.leftPane > table,
	.leftPane > #news,
	.leftPane > #changelogTable {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	footer {
		display: block;
		padding: 8px 12px;
	}

	footer p {
		margin: 5px 0;
	}
}