main {
	display: flex;
	justify-content: flex-start;
	margin: 5% var(--spacing-4xl);

	.about-section {
		max-width: 800px;
		padding: 0 var(--spacing-xl);
		font-size: var(--font-size-xl);
		line-height: var(--line-height-normal);
		color: var(--text);

		.more-info {
			max-height: 100%;
			opacity: 1;
			overflow: hidden;
			transition:
				max-height var(--transition-slow),
				opacity var(--transition-slow);
			&.is-hidden {
				max-height: 0;
				opacity: 0;
			}
		}

		h1 {
			font-size: var(--font-size-5xl);
			margin-bottom: var(--spacing-xl);
		}

		p {
			margin-bottom: var(--spacing-lg);
		}

		.show-more {
			background-color: var(--accent);
			color: var(--text-dark);
			border: none;
			padding: var(--spacing-md) var(--spacing-lg);
			border-radius: var(--radius-sm);
			cursor: pointer;
			font-size: var(--font-size-base);
			font-weight: var(--font-weight-semibold);
			transition: background-color var(--transition-normal);

			&:hover {
				background-color: var(--accent-hover);
			}

			&:focus-visible {
				outline: 2px solid var(--accent);
				outline-offset: 2px;
			}
		}
	}

	.logo-about {
		position: fixed;
		right: 12.5%;
		top: 35%;

		img {
			max-width: auto;
			height: 150px;
		}
	}
}

@media (max-width: 768px) {
	main {
		margin: var(--spacing-xl) var(--spacing-lg);
		flex-direction: column;

		.about-section {
			padding: 0;
			font-size: var(--font-size-base);

			h1 {
				font-size: 1.6rem;
			}
		}

		.logo-about {
			position: static;
			text-align: center;
			margin-bottom: var(--spacing-xl);
			order: -1;

			img {
				height: 80px;
			}
		}
	}
}

/* Template2-inspired refresh */
main {
	.about-section {
		background: var(--surface-1);
		border: 1px solid var(--edge-soft);
		border-radius: var(--radius-3xl);
		padding: var(--spacing-3xl);
		box-shadow: 0 10px 24px var(--shadow-light);
		position: relative;
		overflow: hidden;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4px;
			background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
		}

		h1 {
			line-height: 1.15;
			letter-spacing: 0.01em;
			position: relative;
			display: inline-block;

			&::after {
				content: "";
				position: absolute;
				bottom: -8px;
				left: 0;
				width: 56px;
				height: 3px;
				background: var(--accent);
				border-radius: 2px;
			}
		}

		p,
		.about-text-content,
		.about-text-more-content {
			color: var(--text-light);
		}

		.show-more {
			background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
			border: 1px solid var(--accent);
			box-shadow: none;

			&:hover {
				transform: translateY(-2px);
				box-shadow: 0 10px 20px var(--accent-glow);
			}
		}
	}

	.logo-about {
		background: var(--surface-1);
		border: 1px solid var(--edge-soft);
		border-radius: var(--radius-2xl);
		padding: var(--spacing-xl);

		img {
			filter: none;
		}
	}
}

@media (max-width: 768px) {
	main {
		.about-section {
			padding: var(--spacing-xl);
		}
	}
}