<div class="container">
   <div class="masonry">
      <div class="item item1">
         <img src="https://picsum.photos/id/251/1000" alt="Image 1">
         <div class="card-content">
            <div class="card-title">Card Title 1</div>
            <div class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
         </div>
      </div>
      <div class="item item2">
         <img src="https://picsum.photos/id/252/1000" alt="Image 2">
         <div class="card-content">
            <div class="card-title">Card Title 2</div>
            <div class="card-text">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
         </div>
      </div>
      <div class="item item3">
         <img src="https://picsum.photos/id/253/1000" alt="Image 3">
         <div class="card-content">
            <div class="card-title">Card Title 3</div>
            <div class="card-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</div>
         </div>
      </div>
      <div class="item item4">
         <img src="https://picsum.photos/id/254/1000" alt="Image 4">
         <div class="card-content">
            <div class="card-title">Card Title 4</div>
            <div class="card-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</div>
         </div>
      </div>
      <div class="item item5">
         <img src="https://picsum.photos/id/53/1000" alt="Image 5">
         <div class="card-content">
            <div class="card-title">Card Title 5</div>
            <div class="card-text">Excepteur sint occaecat cupidatat non proident.</div>
         </div>
      </div>
      <div class="item item6">
         <img src="https://picsum.photos/id/256/1000" alt="Image 6">
         <div class="card-content">
            <div class="card-title">Card Title 6</div>
            <div class="card-text">Sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
         </div>
      </div>
      <div class="item item7">
         <img src="https://picsum.photos/id/257/1000" alt="Image 7">
         <div class="card-content">
            <div class="card-title">Card Title 7</div>
            <div class="card-text">Curabitur pretium tincidunt lacus. Nulla gravida orci a odio.</div>
         </div>
      </div>
      <div class="item item8">
         <img src="https://picsum.photos/id/258/1000" alt="Image 8">
         <div class="card-content">
            <div class="card-title">Card Title 8</div>
            <div class="card-text">Ut a eros auctor, laoreet lectus vitae, efficitur erat.</div>
         </div>
      </div>
      <div class="item item9">
         <img src="https://picsum.photos/id/259/1000" alt="Image 9">
         <div class="card-content">
            <div class="card-title">Card Title 9</div>
            <div class="card-text">Vivamus a ligula quam. Ut blandit eu leo non suscipit.</div>
         </div>
      </div>
      <div class="item item10">
         <img src="https://picsum.photos/id/260/1000" alt="Image 10">
         <div class="card-content">
            <div class="card-title">Card Title 10</div>
            <div class="card-text">Cras vel libero pulvinar, sollicitudin est at, accumsan risus.</div>
         </div>
      </div>
   </div>
</div>

body {
	font-family: Arial, sans-serif;
	background-color: #f0f0f0;
	padding: 20px;
	margin: 0;
}

.masonry {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-auto-rows: 10px;
	gap: 20px;
}

.item {
	background-color: #ffffff;
	padding: 0;
	box-sizing: border-box;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	transition: transform 0.3s;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.item:hover {
	transform: translateY(-10px);
}

.item .card-content {
	padding: 15px;
}

.item .card-title {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 10px;
}

.item .card-text {
	font-size: 1em;
	color: #555;
}

.item1 { grid-row: span 15; }
.item2 { grid-row: span 20; }
.item3 { grid-row: span 10; }
.item4 { grid-row: span 25; }
.item5 { grid-row: span 30; }
.item6 { grid-row: span 15; }
.item7 { grid-row: span 20; }
.item8 { grid-row: span 10; }
.item9 { grid-row: span 25; }
.item10 { grid-row: span 30; }