.masonry-container {
    column-count: 2;
    column-gap: 16px;
    margin-top: 48px;
    margin-bottom: 48px;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 16px;
    width: 100%;
}

.masonry-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--md-shape-corner-extra-small);
    border: var(--md-outline);
}

.masonry-item h3 {
    font-size: 1.2rem;
    margin: 8px 0 4px;
    color: var(--text-color, #222);
}

.masonry-item p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
}

@media (min-width: 900px) {
    .masonry-container {
        column-count: 3;
    }
}

#back-button {
    border-radius: 999px;
    padding: 16px;
    position: fixed;
    top: 16px;
    left: 16px;
    box-shadow: var(--md-elevation-1);
}

@keyframes slide-in {
    from {
        transform: translate(-50%, 48px);
    }

    to {
        transform: translate(-50%, 0);
    }
}

#category-buttons-parent {
    padding: 0.5rem;
    background-color: var(--md-sys-color-surface-container-low);
    box-shadow: var(--md-elevation-1);
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: var(--md-shape-corner-full);
    animation: slide-in 0.25s var(--bouncing-ease);
}

#category-buttons {

    border-radius: 99px;
    overflow: hidden;
}

#category-buttons button {
    padding: 8px 12px;
    font-size: 0.9rem;
}