.card-deck
	// Custom, as of bootstrap 4.1.3 there is no way to do this.
	&.card-3-columns
		@extend .row

		.card
			@extend .col-md-4

			+media-lg
				background: green

	&.card-4-columns
		@extend .row

		.card
			@extend .col-md-3
			+media-xs
				flex: 1 0 50%
				max-width: 50%

			+media-sm
				flex: 1 0 33%
				max-width: 33%

			+media-md
				flex: 1 0 25%
				max-width: 25%

			+media-lg
				flex: 1 0 20%
				max-width: 20%


.card-padless
	.card
		@extend .border-0

	.card-body
		@extend .px-0

.card-stretch
	.card-body
		@extend .d-flex
		@extend .flex-column

		.card-text
			@extend .mt-auto

.card-image-fade
	.card-img-top
		opacity: .9

	&:hover
		.card-img-top
			opacity: 1


.card.asset
	color: $color-text

	&:hover
		text-decoration: none

	&.free
		overflow: hidden

		&:after
			+ribbon
			content: 'FREE'
			padding: 2px 50px

	.card-body
		position: relative // for placing the progress

		.card-text
			font-size: $font-size-xs

	.card-img-top
		background-color: $color-background
		background-size: cover
		background-position: center

	.progress
		height: 3px
		position: absolute
		top: -3px
		width: 100%

.progress-bar
	background-color: $primary