section.profile {
	header {
		text-align: center;
		margin-bottom: 3rem;

		h3 {
			font-size: 1rem;
		}

		h5 {
			color: rgba(0, 0, 0, 0.5);
			font-size: 0.75rem;
		}
	}

	& > div.grid {
		display: flex;
		gap: 1rem;

		& > section {
			width: 50%;

			& > div:not(:last-child) {
				margin-bottom: 2rem;
			}
		}
	}

	div.avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 1rem;

		img {
			height: 185px;
			width: 185px;
		}

		.border {
			width: 250px;
			height: 250px;
			position: absolute;
		}
	}

	h4 {
		text-align: center;
		text-transform: uppercase;
		color: white;
		font-size: 0.75rem;
		margin-bottom: 0.5rem;
		background-image: url('/assets/img/bar.jpg');
		background-position: bottom center;
		padding: 0.5rem;
	}

	div.stats {
		& > .grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 0.25rem;

			& > div.cell {
				padding: 0.25rem 0.5rem;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.label {
					font-size: 0.75rem;
					text-transform: uppercase;
					margin-right: 0.25rem;
				}
			}
		}
	}

	#equipped-gear {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;

		div.item {
			display: flex;
			justify-content: center;
			align-items: center;

			&.i-1x1 {
				width: 30px;
				height: 30px;
				background-image: url('/assets/img/ui/1x1.png');
			}

			&.i-2x2 {
				width: 60px;
				height: 60px;
				background-image: url('/assets/img/ui/2x2.png');
			}

			&.i-2x3 {
				width: 60px;
				height: 90px;
				background-image: url('/assets/img/ui/2x3.png');
			}
		}

		& > div {
			display: flex;
			gap: 0.5rem;

			& > div {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 60px;

				&.top, &.bot {
					width: 60px;
					height: 60px;
				}

				&.mid {
					width: 60px;
					height: 90px;
				}
			}
		}
	}
}
