<style>
/* Card container as flex row with no border radius */
.card
{
	display: flex;
	flex-direction: row;
	border-radius: 0;
	box-shadow: 0 1px 6px rgb(0 0 0 / 0.1);
	transition: box-shadow 0.3s ease;
	overflow: hidden; /* clip children */
	cursor: pointer;
	align-items: stretch;
}
/* Shadow on hover and focus */
.card:hover,
.card:focus-within
{
	box-shadow: 0 6px 20px rgb(0 0 0 / 0.15);
	outline: none;
}
/* Image container - fixed height + overflow:hidden to confine zoom */
.image-container
{
	width: 180px;
	height: 250px;
	overflow: hidden;
	flex-shrink: 0;
	background: #f9f9f9;
	display: flex;
	align-items: center;
	justify-content: center;
}
.image-container img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
	filter: grayscale(8%);
	display: block;
}
.card:hover .image-container img,
.card:focus-within .image-container img
{
	filter: grayscale(0%);
	transform: scale(1.1);
}
/* Card content */
.card-body
{
	padding: 1.6rem 1.6rem 1.6rem 1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-grow: 1;
	min-width: 0;
}
.article-title
{
	font-size: 1.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
	cursor: pointer;
	color: inherit;
}
.article-excerpt
{
	font-size: 1.05rem;
	color: #444;
	margin-bottom: 1rem;
	line-height: 1.5;
}
.badges
{
	margin-bottom: 0.75rem;
}
.badge
{
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 0.25em 0.6em;
	border-radius: 0;
	margin-right: 0.5rem;
	user-select: none;
	opacity: 0.75;
	transition: opacity 0.3s ease;
	display: inline-block;
}
.badge-primary
{
	background-color: #0d6efd;
	color: #fff;
}
.badge-success
{
	background-color: #198754;
	color: #fff;
}
.badge-warning
{
	background-color: #ffc107;
	color: #212529;
}
/* Read more button natural width, no stretching */
.btn-read-more
{
	padding-left: 1.4rem;
	padding-right: 1.4rem;
	font-weight: 600;
	border-radius: 0;
	font-size: 1rem;
	border: 2px solid #0d6efd;
	background-color: transparent;
	color: #0d6efd;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	width: auto;/* NOT stretched */
	align-self: flex-start;/* keep natural size */
	transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.btn-read-more:hover,
.btn-read-more:focus
{
	background-color: #0d6efd;
	color: #fff;
	box-shadow: 0 0 15px rgb(13 110 253 / 0.6);
	text-decoration: none;
	outline: none;
}
.btn-read-more i
{
	transition: transform 0.3s ease;
	margin-left: 0.4rem;
}
.btn-read-more:hover i,
.btn-read-more:focus i
{
	transform: translateX(4px);
}
/* Responsive: stack image on top and reset flex on small screens */
@media (max-width: 575.98px)
{
	.card
	{
		flex-direction: column;
		height: auto;
	}
	.image-container
	{
		width: 100%;
		height: 240px;
	}
	.card-body
	{
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
	.btn-read-more
	{
		align-self: center;
	}
}
</style

<article tabindex="0" class="card" aria-labelledby="title1" aria-describedby="desc1">
<div class="image-container">
<img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&q=80" alt="Abstract modern art installation" loading="lazy" />
</div>

<div class="card-body">
<div>
<h2 id="title1" class="article-title">The Digital Art Revolution</h2>
<div class="badges" aria-label="Category tags">
<span class="badge badge-primary">Technology</span>
<span class="badge badge-success">Art</span>
</div>
<p id="desc1" class="article-excerpt">
Digital art is reshaping the gallery experience with AI-generated and immersive VR exhibits that blend technology and tradition,
captivating a new generation of enthusiasts and collectors.
</p>
</div>
<a href="articles/digital-art-revolution.html" class="btn-read-more" aria-label="Read more about The Digital Art Revolution">
Read More <i class="bi bi-arrow-right"></i>
</a>
</div>
</article>

can you simpify the css? that takes advantage of bootstrap 5.3 more and less css?