.cards_browser { display: block; }

.cards_browser .card_entry { display: inline-block; width: 200px; margin: 10px; padding: 0; vertical-align: top;
                             font-family: Arial, Helvetica, sans-serif; font-size: 10pt; line-height: normal;
                             /* border: 1px solid black; box-shadow: 2px 2px 4px silver; */ }

@media all and (min-width:  100px) { .cards_browser .card_entry { width: calc(100% - 20px) } }
@media all and (min-width:  420px) { .cards_browser .card_entry { width: calc( 50% - 23px) } }
@media all and (min-width:  768px) { .cards_browser .card_entry { width: calc( 33% - 22px) } }
@media all and (min-width: 1024px) { .cards_browser .card_entry { width: calc( 25% - 24px) } }
@media all and (min-width: 1360px) { .cards_browser .card_entry { width: calc( 25% - 24px) } }
@media all and (min-width: 1440px) { .cards_browser .card_entry { width: calc( 20% - 24px) } }

.card_entry .icon            { height: 1.4em; vertical-align: bottom; }
.card_entry .featured_image  { display: inline-block; width: 100%; margin-top: 10px;
                               background: center center no-repeat; background-size: contain; height: 150px; }
.card_entry .title           { margin-top: 10px; padding: 0 5px; height: 2.8em; overflow: hidden; }
.card_entry .description     { margin-top: 10px; padding: 0 5px; height: 3.4em; overflow: hidden; }
.card_entry .meta            { margin-top: 10px; padding: 0 5px; font-size: 9pt; height: 6em; overflow: hidden; }
.card_entry .actions         { margin: 10px 5px 5px 5px; text-align: center;}
.card_entry .actions .action { display: inline-block; margin: 0 5px 5px 0; white-space: nowrap; }

.cards_browser .meta > * { display: inline-block; white-space: nowrap; color: darkmagenta; margin: 0 5px 5px 0; }

.card_entry.incomplete { background-color: #FDEDF0; color: darkred; }
.card_entry.published  { background-color: #E3FCE3; }
.card_entry.blue       { background-color: #E7F5FB; }
.card_entry.alerted    { background-color: #fdf786; }
.card_entry.hidden     { background-color: #EDEDED; color: dimgrey;
                         /* border-color: silver; box-shadow: 2px 2px 4px lightgrey; */ }

.card_entry.hidden .featured_image { filter: grayscale(100%); opacity: 0.75; }

.card_entry        .actions .action.show { display: none; }
.card_entry.hidden .actions .action.show { display: inline-block; }
.card_entry.hidden .actions .action.hide { display: none; }