تجربة

<style> .card-container {

 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;

}

.card {

 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 transition: 0.3s;
 width: 200px;
 border-radius: 5px;
 margin: 15px;

}

.card:hover {

 box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);

}

.container {

 padding: 2px 16px;

}

</style>

   <img src="صورة_البطاقة_1.jpg" alt="صورة البطاقة 1" style="width:100%">

عنوان البطاقة 1

وصف للبطاقة 1.

   <img src="صورة_البطاقة_2.jpg" alt="صورة البطاقة 2" style="width:100%">

عنوان البطاقة 2

وصف للبطاقة 2.