section {
	display: grid;
	grid-template-columns: 1fr 384px;
	gap: 1rem;
}

	section > div {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

/*#region Info */

#Info {
	display: flex;
	flex-direction: column;
	gap: 10px;
	grid-column: 1;
	grid-row: 1 / 3;
	background: rgba(0, 0, 0, 0.3);
	padding: 1rem;
}

	#Info > h1 {
		font-size: 21px;
	}

	#Info > .tags {
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
		list-style-type: none;
	}

		#Info > .tags > li {
			background: #222222;
			color: #9d9892;
			padding: 5px;
			font-weight: 900;
			font-size: 13px;
			white-space: nowrap;
		}

	#Info > div {
		color: #9d9892;
		font-size: 14px;
	}

		#Info > div > a {
			color: var(--rust-red);
			text-decoration: none;
		}

			#Info > div > a:hover {
				text-decoration: underline;
			}

			#Info > div > a:hover {
				text-decoration: underline;
			}

	#Info > details {
		color: #9d9892;
		font-size: 13px;
	}

		#Info > details summary {
			cursor: pointer;
			font-weight: 600;
		}

			#Info > details summary:hover {
				color: var(--rust-red);
			}

		#Info > details p {
			margin: 6px 0;
		}


/*#endregion */

/*#region Connection */
#Connection > img {
	width: 384px;
	height: 192px;
	object-fit: cover;
}

#Connection > .live {
	display: grid;
	grid-template-columns: 1fr 85px;
	height: 40px;
	background: rgba(0, 0, 0, 0.3);
	font-weight: bold;
	font-size: 14px;
	line-height: 40px;
}

	#Connection > .live > span:first-of-type {
		padding-inline: 10px;
	}

	#Connection > .live > .status {
		text-align: center;
		color: white;
		white-space: nowrap;
		font-size: 13px;
	}

		#Connection > .live > .status.online {
			background: var(--rust-green);
		}

		#Connection > .live > .status.offline {
			background: var(--rust-red);
		}

#Connection > .address {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 5px;
}

	#Connection > .address > code {
		height: 40px;
		background: rgba(0, 0, 0, 0.3);
		font-weight: bold;
		font-size: 14px;
		line-height: 40px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-inline: 10px;
	}

	#Connection > .address > :is(span, a) {
		background: #2c2e30;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		cursor: pointer;
	}

		#Connection > .address > :is(span, a):hover {
			filter: brightness(1.15);
		}

	#Connection > .address > span {
		position: relative;
		background: #274255;
	}

		#Connection > .address > span > #CopyTooltip {
			position: absolute;
			background-color: #2d4c62;
			color: #74d1ff;
			font-size: 13px;
			font-weight: bold;
			white-space: nowrap;
			padding: 7px 10px;
			bottom: 120%;
			opacity: 0;
			transition: opacity 0.3s;
			pointer-events: none;
		}

			#Connection > .address > span > #CopyTooltip::after {
				content: "";
				position: absolute;
				top: 100%;
				left: 50%;
				margin-left: -5px;
				border-width: 5px;
				border-style: solid;
				border-color: #2d4c62 transparent transparent transparent;
			}

		#Connection > .address > span:hover > #CopyTooltip {
			opacity: 1;
		}

		#Connection > .address > span > i {
			background: #65b6ed;
		}

	#Connection > .address > a {
		background: var(--rust-red);
	}

/*#endregion */

#Map > img {
	width: 384px;
	height: 384px;
}

/*#region OrganizationServers */

#OrganizationServers {
	grid-column: 1/-1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

	#OrganizationServers > h2 {
		grid-column: 1/-1;
		font-size: 18px;
		margin-bottom: 10px;
		border-left: 3px solid var(--rust-red);
		padding-left: 10px;
	}

		#OrganizationServers > h2 > a {
			color: var(--rust-red);
			text-decoration: none;
		}

	#OrganizationServers > a {
		min-width: 0;
		background: rgba(0, 0, 0, 0.3);
		text-decoration: none;
		transition: transform 0.3s;
	}

		#OrganizationServers > a:hover {
			transform: translateY(-5px);
		}

		#OrganizationServers > a > img {
			width: 100%;
			height: auto;
			object-fit: cover;
			overflow: hidden;
		}

		#OrganizationServers > a > div {
			padding: 10px;
		}

			#OrganizationServers > a > div > h3 {
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 16px;
				color: white;
				margin-bottom: 5px;
			}

			#OrganizationServers > a > div > p {
				color: #9d9892;
				font-size: 13px;
				display: -webkit-box;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

/*#endregion */



@media (max-width: 1010px) {
	section {
		grid-template-columns: 1fr;
	}

	#Connection {
		order: 0;
	}

		#Connection > img {
			width: 100%;
			height: auto;
			max-height: 200px;
			object-fit: contain;
			background: rgba(0, 0, 0, 0.3);
		}

	#Info {
		order: 1;
		grid-column: auto;
		grid-row: auto;
	}

	#Map {
		order: 2;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1rem;
		background: rgba(0, 0, 0, 0.3);
	}

		#Map > img {
			width: 100%;
			height: auto;
		}

	#OrganizationServers {
		order: 3;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	}
}