Постарайся придраться к имеющемуся функционалу и стилям, не нужно придумывать улучшения (по крайней мере сейчас)

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			box-sizing: border-box;
		}
	
		body {
			font-family: Arial, sans-serif;
			padding: 20px;
		}
	
		.grid-container {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
			gap: 16px;
			transition: all 0.75s ease;
		}
	
		.card {
			background-color: #f0f0f0;
			padding: 20px;
			position: relative;  
			transition: background-color 2s ease, grid-column 2s ease;
			-webkit-transition: background-color 2s ease, grid-column 2s ease;
			cursor: pointer;
			z-index: 1;
			border-radius: 8px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		}
	
		.card .expand-btn {
			margin-top: 10px;
			padding: 8px 12px;
			background-color: #007bff;
			color: white;
			border: none;
			cursor: pointer;
			transition: background-color 0.3s ease;
			border-radius: 4px;
		}
	
		.card .expand-btn:hover {
			background-color: #0056b3;
		}
	
		.card.expanded {
			grid-column: 1 / -1;
			background-color: #d0eaff;
			z-index: 2;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
		}

		.overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s ease;
			z-index: 1;
		}
	
		.overlay.show {
			opacity: 1;
			visibility: visible;
		}
	</style>
</head>

<body>
	<div class="overlay"></div>
	<div class="grid-container">
		<div class="card">
			<div class="content">Карточка 1</div>
			<div class="details">
				Дополнительная информация...
			</div>
			<button class="expand-btn">Развернуть</button>
		</div>
		<div class="card">
			<div class="content">Карточка 2</div>
			<button class="expand-btn">Развернуть</button>
		</div>
		<div class="card">
			<div class="content">Карточка 1</div>
			<div class="details">
				Дополнительная информация...
			</div>
			<button class="expand-btn">Развернуть</button>
		</div>
		<div class="card">
			<div class="content">Карточка 4</div>
			<button class="expand-btn">Развернуть</button>
		</div>
		<div class="card">
			<div class="content">Карточка 1</div>
			<div class="details">
				Дополнительная информация...
			</div>
			<button class="expand-btn">Развернуть</button>
		</div>
		<div class="card">
			<div class="content">Карточка 2</div>
			<button class="expand-btn">Развернуть</button>
		</div>
		<div class="card">
			<div class="content">Карточка 1</div>
			<div class="details">
				Дополнительная информация...
			</div>
			<button class="expand-btn">Развернуть</button>
		</div>
		<div class="card">
			<div class="content">Карточка 4</div>
			<button class="expand-btn">Развернуть</button>
		</div>
		<div class="card">
			<div class="content">Карточка 1</div>
			<div class="details">
				Дополнительная информация...
			</div>
			<button class="expand-btn">Развернуть</button>
		</div>
		<div class="card">
			<div class="content">Карточка 2</div>
			<button class="expand-btn">Развернуть</button>
		</div>
		<div class="card">
			<div class="content">Карточка 1</div>
			<div class="details">
				Дополнительная информация...
			</div>
			<button class="expand-btn">Развернуть</button>
		</div>
		<div class="card">
			<div class="content">Карточка 4</div>
			<button class="expand-btn">Развернуть</button>
		</div>
	</div>
</body>
<script>
	const overlay = document.querySelector('.overlay');

	document.querySelectorAll('.expand-btn').forEach(button => {
		button.addEventListener('click', (e) => {
			e.stopPropagation();
			const card = button.closest('.card');

			if (card.classList.contains('expanded')) {
				card.classList.remove('expanded');
				overlay.classList.remove('show');
			} else {
				document.querySelectorAll('.card.expanded').forEach(expandedCard => {
					expandedCard.classList.remove('expanded');
				});
				card.classList.add('expanded');
				overlay.classList.add('show');
			}
		});
	});

	// Свернуть карточку при клике на затемненный фон
	overlay.addEventListener('click', () => {
		document.querySelectorAll('.card.expanded').forEach(expandedCard => {
			expandedCard.classList.remove('expanded');
		});
		overlay.classList.remove('show');
	});
</script>

</html>