<style>
.custom-card
{
	border-radius: 0;/* Removes rounded corners */
	cursor: pointer;
	transition: box-shadow 0.8s ease;
	align-items: stretch;/* stretch children vertically */
}
.custom-card:hover,
.custom-card:focus-within
{
	box-shadow: 0 6px 20px rgb(0 0 0 / 0.15) !important;
	outline: none;
}
.image-container
{
	width: 180px;
	height: auto;
	overflow: hidden;
	flex-shrink: 0;
	align-self: stretch;/* stretch vertically to match content height */
	background-color: #f8f9fa;/* same as bg-light */
	display: flex;
	align-items: center;
	justify-content: center;
	/*box-sizing: border-box;/* TODO */
	margin: 0;
	padding: 0;
}
.image-container img
{
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
	filter: grayscale(8%);/* TODO */
	transition: transform 0.8s ease, filter 0.8s ease;/* TODO */
	vertical-align: bottom;
	margin: 0;
	padding: 0;
	border: none;
	box-sizing: border-box;
}
/**
* This allows for the zoom in img effect
*
.custom-card:hover .image-container img,
.custom-card:focus-within .image-container img
{
	filter: grayscale(0%);
	transform: scale(1.1);
}
*/
.card-body
{
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	padding: 1rem 1rem 1rem 0.75rem;
	/*box-sizing: border-box;/* TODO */
}
.custom-letter-spacing
{
	letter-spacing: 0.05em;
	cursor: pointer;
	color: inherit;
}
.custom-badge
{
	font-size: 0.72rem;
	letter-spacing: 0.07em;
}
.custom-excerpt
{
	line-height: 1.5;
	font-size: 1.05rem;
}
/* Button styling and responsive width behavior */
.btn-read-more-responsive
{
	align-self: flex-start;/* natural size */
	display: inline-flex;
	width: auto;
	border-radius: 0;
	transition: background-color 0.8s ease, color 0.8s ease, box-shadow 0.8s ease;/* TODO */
}
.btn-read-more-responsive:hover,
.btn-read-more-responsive: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-responsive i
{
	transition: transform 0.8s ease;/* TODO */
}
.btn-read-more-responsive:hover i,
.btn-read-more-responsive:focus i
{
	transform: translateX(4px);
}
/* Mobile: button fills full width */
@media (max-width: 575.98px)
{
	.custom-card
	{
		flex-direction: column !important;
	}
	.image-container
	{
		width: 100% !important;
		height: 240px !important;
		align-self: auto !important;/* reset stretch for stacked layout */
	}
	.btn-read-more-responsive
	{
		width: 100% !important;
		display: flex !important;
		justify-content: center;
		align-self: stretch !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}
</style>

i want to remove the border around the card

<article tabindex="0" class="card d-flex flex-row overflow-hidden shadow-sm custom-card" aria-labelledby="title1" aria-describedby="desc1">
<div class="image-container flex-shrink-0 bg-light d-flex align-items-center justify-content-center">
<img
	src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&q=80" 
	alt="Abstract modern art installation"
	loading="lazy" 
	class="w-100 h-100 object-fit-cover grayscale-transition"
/>
</div>

<div class="card-body d-flex flex-column justify-content-between px-3 py-3 flex-grow-1">
<div>
<h2 id="title1" class="h5 fw-bold mb-2 custom-letter-spacing">The Digital Art Revolution</h2>

<div class="mb-3" aria-label="Category tags">
<span class="badge bg-primary me-2 opacity-75 text-uppercase fw-semibold custom-badge">Technology</span>
<span class="badge bg-success opacity-75 text-uppercase fw-semibold custom-badge">Art</span>
</div>

<p id="desc1" class="text-secondary mb-3 custom-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 btn-outline-primary fw-semibold py-2 px-4 btn-read-more-responsive"
   aria-label="Read more about The Digital Art Revolution">
   Read More <i class="bi bi-arrow-right ms-2 transition-transform"></i>
</a>

</a>
</div>
</article>