|
|
@@ -37,22 +37,27 @@
|
|
|
|
|
|
.blog-card-image-container {
|
|
|
width: 100%;
|
|
|
- height: 280px;
|
|
|
+ max-height: 400px;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ background: #f7fafc;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
|
|
|
.blog-card-image-container img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 400px;
|
|
|
+ width: auto;
|
|
|
+ height: auto;
|
|
|
+ object-fit: contain;
|
|
|
object-position: center;
|
|
|
transition: transform 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.blog-card:hover .blog-card-image-container img {
|
|
|
- transform: scale(1.05);
|
|
|
+ transform: scale(1.02);
|
|
|
}
|
|
|
|
|
|
.blog-card-content {
|
|
|
@@ -122,9 +127,12 @@
|
|
|
|
|
|
/* Responsive */
|
|
|
@media (max-width: 768px) {
|
|
|
- .blog-card-image,
|
|
|
.blog-card-image-container {
|
|
|
- height: 200px;
|
|
|
+ max-height: 250px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .blog-card-image-container img {
|
|
|
+ max-height: 250px;
|
|
|
}
|
|
|
|
|
|
.blog-card-content {
|
