/* ====================
ARCHIVE GRID CONTAINER
==================== */
.archive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 100%;
margin: 0 auto;
gap: 5px;
}

.archive-grid a {
display: block;
overflow: hidden;
}

.archive-grid a img {
width: 100%;
height: auto;
display: block;
transition: transform 0.2s ease;
}

/* ====================
MOBILE RESPONSIVE
==================== */
@media (max-width: 768px) {

.archive-container { 
width: 100%;
max-width: 100%;
margin: 0 auto;
}

.archive-grid {
grid-template-columns: repeat(2, 1fr);
margin: 0 auto;
width: 100%;
gap: 5px;
}

.archive-grid a {
width: 100%;
flex: none;
}

.archive-grid a img {
width: 100%;
height: auto;
display: block;
}
}