.page-grid {
display: grid;
gap: 20px;
justify-content: center;
} .page-grid {
grid-template-columns: repeat(3, 1fr) !important; } @media (max-width: 768px) {
.page-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
} @media (max-width: 480px) {
.page-grid {
grid-template-columns: repeat(1, 1fr) !important;
}
}
.page-grid-item {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
background: #f9f9f9;
padding: 15px;
border-radius: 8px;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
overflow: hidden;
border: 1px solid #ddd;
} .page-grid-item img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 5px 5px 0 0;
}
.page-grid-content {
padding: 10px;
text-align: center;
}