.pgd-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.pgd-grid {
    display: grid;
    grid-template-columns: repeat(var(--pgd-columns-desktop, 3), 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.pgd-grid-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pgd-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.pgd-grid-item a {
    text-decoration: none;
    color: inherit;
    display: block;
    flex-grow: 1;
}

.pgd-item-image {
    width: 100%;
    height: var(--pgd-image-height, 250px);
    object-fit: cover;
    display: block;
}

.pgd-item-content {
    padding: 20px;
}

.pgd-item-title {
    font-size: var(--pgd-title-size, 20px);
    font-weight: bold;
    margin: 0 0 10px 0;
    color: #333;
    line-height: 1.4;
}

.pgd-item-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.pgd-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.pgd-pagination a,
.pgd-pagination span {
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.pgd-pagination a:hover {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}

.pgd-pagination .current {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}

.pgd-no-posts {
    text-align: center;
    padding: 40px 20px;
    font-size: 16px;
    color: #666;
}

/* Responsiveness */
@media screen and (max-width: 1024px) {
    .pgd-grid {
        grid-template-columns: repeat(var(--pgd-columns-tablet, 2), 1fr);
    }
}

@media screen and (max-width: 768px) {
    .pgd-grid {
        grid-template-columns: repeat(var(--pgd-columns-mobile, 1), 1fr);
    }
    
    .pgd-item-image {
        /* Fallback logic for smaller screens if needed, 
           but usually CSS var or height auto is fine. 
           Keeping the inline logic essence via calc or media query override if needed. 
           For now, let's stick to the variable or a reasonable max. */
        height: 200px; /* As per original logic override for small screens */
    }
}