/* Gallery Loading States */
.main > .content {
    width: 90%;
}
.gallery {
    flex-wrap: wrap;
    width: auto;
}

.loading-message,
.error-message {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
}

.loading-message {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Disable transform animations on gallery images */
.gallery article {
    margin-bottom: 2rem;
    width: 23%;
    padding: 1%;
    /* Remove all transform transitions */
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
    /* Keep images in their default position */
    -moz-transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    -ms-transform: translateX(0) !important;
    transform: translateX(0) !important;
    /* Ensure opacity stays at 1 */
    opacity: 1 !important;
}

/* Disable transform effects for inactive gallery state */
.gallery.inactive article {
    opacity: 1 !important;
}

.gallery.inactive article.from-left,
.gallery.inactive article.from-right,
.gallery.inactive article.from-top,
.gallery.inactive article.from-bottom {
    -moz-transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    -ms-transform: translateX(0) !important;
    transform: translateX(0) !important;
}

/* Remove transition delays */
.gallery article:nth-last-child(1n),
.gallery article:nth-last-child(2n),
.gallery article:nth-last-child(3n),
.gallery article:nth-last-child(4n),
.gallery article:nth-last-child(5n),
.gallery article:nth-last-child(6n),
.gallery article:nth-last-child(7n),
.gallery article:nth-last-child(8n),
.gallery article:nth-last-child(9n),
.gallery article:nth-last-child(10n),
.gallery article:nth-last-child(11n),
.gallery article:nth-last-child(12n),
.gallery article:nth-last-child(13n),
.gallery article:nth-last-child(14n),
.gallery article:nth-last-child(15n),
.gallery article:nth-last-child(16n),
.gallery article:nth-last-child(17n),
.gallery article:nth-last-child(18n),
.gallery article:nth-last-child(19n),
.gallery article:nth-last-child(20n),
.gallery article:nth-last-child(21n),
.gallery article:nth-last-child(22n),
.gallery article:nth-last-child(23n),
.gallery article:nth-last-child(24n) {
    -moz-transition-delay: 0s !important;
    -webkit-transition-delay: 0s !important;
    -ms-transition-delay: 0s !important;
    transition-delay: 0s !important;
}

/* Tag Filter Styling */
.tag-filter {
    margin-bottom: 2rem;
    text-align: center;
}

.tag-filter-header h3 {
    margin-bottom: 1rem;
    color: #333;
    font-size: 1.2em;
}

.tag-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tag-btn {
    background: #f8f8f8;
    border: 2px solid #ddd;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: capitalize;
}

.tag-btn:hover {
    background: #e8e8e8;
    border-color: #ccc;
    color: #333;
}

.tag-btn.active {
    background: #333;
    border-color: #333;
    color: #fff;
}

/* No results message */
.no-results {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
}

/* Responsive adjustments for dynamic content */
@media screen and (max-width: 736px) {
    .main > .content {
        padding: 10% 0 0 0;
    }
    .gallery article {
        margin-bottom: 1rem;
        width: 33%;

    }
    #full-gallery-button {
        width: 60%;
    }
    .tag-buttons {
        gap: 0.3rem;
    }

    .tag-btn {
        font-size: 0.7em;
    }
}

.grid {
    background: #DDD;
}

/* clear fix */
.grid:after {
    content: '';
    display: block;
    clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
    width: 33.333%;
}

.grid-item {
    float: left;
}

.grid-item img {
    display: block;
    width: 100%;
}