/* Equal-height post cards in Owl carousels and listing grids. */
.owl-carousel.listing .owl-stage,
.owl-carousel.listing .owl-item {
    display: flex;
}

.owl-carousel.listing .item,
.card-grid > [class*="col-"] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.owl-carousel.listing .item > article,
.card-grid > [class*="col-"] > article {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.owl-carousel.listing .item > article > .post-card,
.card-grid > [class*="col-"] > article > .post-card {
    flex: 1 1 auto;
}

/* Lets a card's bottom button (.about-card-footer, margin-top: auto) line up across a row.
   The theme makes .post-card display: block, so the card itself has to become a flex column. */
.post-card.post-card-with-btn {
    display: flex;
    flex-direction: column;
}

.post-card-with-btn > .post-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* A grid with 1fr rows sizes every row to the tallest card in the whole list,
   not just the tallest card in the same row. Column counts mirror the
   col-lg-4/col-md-6 (no categories) and col-lg-6/col-md-12 (with categories)
   classes that topics.blade.php puts on each card. */
.card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
}

@media (min-width: 768px) {
    .card-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .card-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .card-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}