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;
	}

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

	main .about-section h1 {
		font-size: 1.6rem;
	}

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

	main .logo-about img {
		height: 80px;
	}
}