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

.archive-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 50px;
}

.archive-item {
    display: flex;
    flex-direction: column;
}

.archive-item img {
    height: auto;
    display: block;
    width: 100%;

    filter: grayscale(10%);
    transition: filter 0.25s ease;
}

.archive-item:hover img {
    filter: grayscale(0%);
}

.caption {
    font-size: 14px;
    line-height: 1.4;
    color: rgb(26, 44, 21);
    opacity: 0.85;
    margin-top: 10px;
    width: 100%;
}

/*
=============================================
MEDIA QUERIES
=============================================
*/

/*
=1 COLUMN
=============================================
*/
@media (max-width: 575.98px) {
    .archive-item {
        flex: 0 0 100%;
        max-width: 100%;

    }
}

/*
=2 COLUMNS
=============================================
*/
@media (min-width: 576px) and (max-width: 767.98px) {
    .archive-item {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
}

/*
=3 COLUMNS
=============================================
*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .archive-item {
        flex: 0 0 calc(33.333% - 14px);
        max-width: calc(33.333% - 14px);
    }
}

/*
=4 COLUMNS
=============================================
*/
@media (min-width: 992px) {
    .archive-item {
        flex: 0 0 calc(25% - 15px);
        max-width: calc(25% - 15px);
    }
}