#filtersContainer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

#filtersContainer.active {
    max-height: 300px;
}

.desktop-only {
    display: table-cell;
}
.mobile-only {
    display: none;
}

@media screen and (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block;
        width: 100%;
    }

    thead {
        display: none;
    }

    tr {
        margin-bottom: 10px;
        border: 1px solid #ddd;
        padding: 10px;
    }

    td {
        text-align: left;
        padding: 8px;
        border-bottom: 1px solid #ddd;
    }

    td:before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }
}

@media screen and (min-width: 769px) {
    .desktop-only {
        display: table-cell !important;
    }

    .mobile-only {
        display: none !important;
    }
}

.story-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.tag.is-cyan {
    background-color: #00bcd4;
    color: #000;
}

.tag.is-purple {
    background-color: #9c27b0;
    color: #000;
}

.tag.is-purple-light {
    background-color: #834e8d;
    color: #000;
}

.tag.is-orange {
    background-color: #ff9800;
    color: #000;
}