.animated-post-grid {
    max-width: 1200px;
    margin: 0 auto;
}
.grid-item {
  border-radius: 20px;
} 
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 20px;
}
.grid-item {
    position: relative;
    overflow: hidden;
}
.grid-item-inner {
    position: relative;
    transition-property: opacity, transform;
    transition-duration: var(--animation-duration);
    transition-timing-function: ease-in-out;
    transform: translateX(0) scale(1);
    opacity: 1;

}
/* Gradient overlay */
.grid-item img,
.grid-item .no-image {
    position: relative;
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
          border-radius: 20px;
}
.grid-item .grid-item-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, #1c347a 100%);
    z-index: 1;
    transition: background 0.3s ease;
}
.grid-item .grid-item-link:hover::after {
    background: linear-gradient(to bottom, #c02b2766 0%, #c02b27 100%);
}
/* Fade Animation */
.animated-post-grid[data-animation-type="fade"] .grid-item.fade-out .grid-item-inner {
    opacity: 0;
}
.animated-post-grid[data-animation-type="fade"] .grid-item.fade-in .grid-item-inner {
    opacity: 1;
}
.animated-post-grid[data-animation-type="fade"] .grid-item.hidden .grid-item-inner {
    opacity: 0;
}
/* Slide Animation */
.animated-post-grid[data-animation-type="slide"] .grid-item.fade-out .grid-item-inner {
    opacity: 0;
    transform: translateX(-30%);
}
.animated-post-grid[data-animation-type="slide"] .grid-item.fade-in .grid-item-inner {
    opacity: 1;
    transform: translateX(0);
}
.animated-post-grid[data-animation-type="slide"] .grid-item.hidden .grid-item-inner {
    opacity: 0;
    transform: translateX(30%);
}
/* Scale Animation */
.animated-post-grid[data-animation-type="scale"] .grid-item.fade-out .grid-item-inner {
    opacity: 0;
    transform: scale(0.95);
}
.animated-post-grid[data-animation-type="scale"] .grid-item.fade-in .grid-item-inner {
    opacity: 1;
    transform: scale(1);
}
.animated-post-grid[data-animation-type="scale"] .grid-item.hidden .grid-item-inner {
    opacity: 0;
    transform: scale(1.05);
}
.grid-item-link {
    display: block;
    position: relative;
    text-decoration: none;
    color: #fff;
}
.grid-item img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}
.grid-item .no-image {
    background: #f0f0f0;
}
.grid-item .post-title {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 10px;
    color: #fff;
    font-size: 1em;
    text-align: center;
    z-index: 2; /* Above gradient */
    transition: color 0.3s ease;
}
.grid-item .post-title:hover {
    color: #e0f7ff; /* Light blue on hover */
}
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);
        gap: 20px;
    }
}
@media (max-width: 600px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);
        gap: 10px; /* Reduced gap for mobile */
    }
    .grid-item img,
    .grid-item .no-image {
        height: 160px !important; /* Increased height for mobile */
    }
    .grid-item .post-title {
        font-size: 0.85em; /* Slightly smaller text for mobile */
        padding: 6px; /* Adjusted padding */
    }
}