/*=====================
ARCHIVE GRID CONTAINER
======================*/

.archive-grid {
display: grid;
width: 100%;
margin: 8px auto 4px;
gap: 8px;
}

.archive-grid--4col { grid-template-columns: repeat(4, 1fr); }
.archive-grid--3col { grid-template-columns: repeat(3, 1fr); }
.archive-grid--2col { grid-template-columns: repeat(2, 1fr); }


/* Thumbnail border thickness (thumbnails only) */
.thumb-btn .rounded-image {
  border-width: var(--thumb-border-width, 3.25px);
}

/* Thumbnail border colors: default JPG and hover circle separately */
.thumb-btn .thumb-default { border-color: var(--thumb-default-color, #000); }
.thumb-btn .thumb-hover   { border-color: var(--thumb-hover-color, #000); }

/*===============
MOBILE RESPONSIVE
================*/

@media (max-width: 768px) {
    
.archive-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
}

.archive-grid--4col,
.archive-grid--3col,
.archive-grid--2col {
grid-template-columns: repeat(2, 1fr);
gap: 5px;
}

.thumb-btn .rounded-image {
border-width: var(--thumb-border-width-mobile, 3px);
}
}