@border-radius: 12px;

.about_app {
	display: flex;
	flex-direction: column;

	width: 100%;

	color: var(--text-color);

	gap: 20px;

	.header {
		display: flex;
		flex-direction: row;

		justify-content: space-between;
		align-self: center;

		width: 100%;

		padding: 20px;

		border-radius: @border-radius;
		background-color: var(--background-color-accent);

		.branding {
			display: flex;
			flex-direction: row;

			align-items: center;

			.ant-tag {
				margin: 0;
				width: fit-content;
			}

			.logo {
				display: flex;
				flex-direction: row;

				align-items: center;

				width: 60px;
				height: 100%;

				margin-right: 20px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.texts {
				display: flex;
				flex-direction: column;

				justify-content: center;

				gap: 6px;

				.sitename-text {
					display: flex;
					flex-direction: row;

					align-items: center;

					gap: 10px;

					h2 {
						margin: 0;
					}
				}
			}

			h1,
			h2,
			h3 {
				height: fit-content;
				line-height: 24px;
			}

			span {
				height: fit-content;
				color: var(--background-color-contrast);
				font-size: 10px;
			}
		}
	}

	.group {
		display: inline-flex;

		flex-direction: column;
		justify-content: center;

		padding: 15px;

		gap: 10px;

		background-color: var(--background-color-accent);

		border-radius: @border-radius;

		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		p {
			margin: 0;
		}
	}
}
