@import "variables";
/*--------------------------------------------------------------
## Card
--------------------------------------------------------------*/
.card {
	display: block;
	@include word-wrap;
}

/*--------------------------------------------------------------
### Grid layout
--------------------------------------------------------------*/
@include media-breakpoint-up(md) {
	.card-deck {
		display: flex;
		margin-right: -$card-deck-margin / 2;
		margin-left: -$card-deck-margin / 2;
		flex-flow: row wrap;
		.card {
			margin-right: $card-deck-margin / 2;
			margin-left: $card-deck-margin / 2;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}
	.posts-list {
		&--grid-2-cols,
		&--grid-3-cols {
			.card {
				max-width: calc(100% / 2 - #{$card-deck-margin});
				width: calc(100% / 2 - #{$card-deck-margin});
				flex: 0 0 calc(100% / 2 - #{$card-deck-margin});
			}
		}
	}
}

@include media-breakpoint-up(lg) {
	.posts-list {
		&--grid-2-cols {
			.card {
				max-width: calc(100% / 2 - #{$card-deck-margin});
				width: calc(100% / 2 - #{$card-deck-margin});
				flex: 0 0 calc(100% / 2 - #{$card-deck-margin});
			}
		}
		&--grid-3-cols {
			.card {
				max-width: calc(100% / 3 - #{$card-deck-margin});
				width: calc(100% / 3 - #{$card-deck-margin});
				flex: 0 0 calc(100% / 3 - #{$card-deck-margin});
			}

		}
	}
}

@include media-breakpoint-only(lg) {
	.posts-list {
		&--grid-3-cols {
			&.one-right-sidebar,
			&.one-left-sidebar {
				.card {
					max-width: calc(100% / 2 - #{$card-deck-margin});
					width: calc(100% / 2 - #{$card-deck-margin});
					flex: 0 0 calc(100% / 2 - #{$card-deck-margin});
				}
			}
		}
	}
}

/*--------------------------------------------------------------
### Masonry layout
--------------------------------------------------------------*/
@include media-breakpoint-up(md) {
	.card-columns {
		column-gap: $card-deck-margin;
		.card {
			display: inline-block;
			width: 100%; // Don't let them exceed the column width
		}
	}
	.posts-list--masonry-2-cols,
	.posts-list--masonry-3-cols {
		column-count: 2;
	}
}

@include media-breakpoint-up(lg) {
	.posts-list--masonry-2-cols {
		column-count: 2;
	}
	.posts-list--masonry-3-cols {
		column-count: 3;
	}
}

@include media-breakpoint-only(lg) {
	.posts-list--masonry-3-cols {
		&.one-right-sidebar,
		&.one-left-sidebar {
			column-count: 2;
		}
	}
}

/*--------------------------------------------------------------
### Vertical Justify layout
--------------------------------------------------------------*/
@include media-breakpoint-up(md) {
	.posts-list {
		&--vertical-justify {
			display: flex;
			margin-right: -$card-deck-margin / 2;
			margin-left: -$card-deck-margin / 2;
			flex-flow: row wrap;
			.card {
				flex: 0 0 calc(100% / 2 - #{$card-deck-margin});
				width: calc(100% / 2 - #{$card-deck-margin});
				max-width: calc(100% / 2 - #{$card-deck-margin});
				margin-right: $card-deck-margin / 2;
				margin-left: $card-deck-margin / 2;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
		}
	}
}
@include media-breakpoint-up(xl) {
	.posts-list {
		&--vertical-justify {
			.card {
				flex: 0 0 calc(100% / 3 - #{$card-deck-margin});
				width: calc(100% / 3 - #{$card-deck-margin});
				max-width: calc(100% / 3 - #{$card-deck-margin});
				&:nth-child(7n + 2),
				&:nth-child(7n + 3) {
					flex: 0 0 calc(100% / 1.5 - #{$card-deck-margin});
					width: calc(100% / 1.5 - #{$card-deck-margin});
					max-width: calc(100% / 1.5 - #{$card-deck-margin});
				}
			}
		}
	}
}