/* Cards */

.ui.one.cards,
.ui.three.cards,
.ui.four.cards,
.ui.doubling.cards,
.ui.stackable.cards {
	margin: -1em;

	@include medium-desktop() {
		margin: -0.5em;
	}
}

.ui.one.cards>.card {
	width: calc(100% - 2em);
	margin: 1em;

	@include medium-desktop() {
		width: calc(100% - 1em);
		margin: 0.5em
	}
}

.ui.three.cards>.card {
	width: calc(33.33333333% - 2em);
	margin: 1em;

	@include big-tablet() {
		width: calc(50% - 1em);
		margin: 0.5em
	}

	@include breakpoint-down(xs) {
		width: calc(100% - 1em);
	}
}

.ui.four.cards>.card {
	width: calc(25% - 2em);
	margin: 1em;

	@include medium-desktop() {
		width: calc(25% - 1em);
		margin: 0.5em
	}

	@include big-tablet {
		width: calc(33.33333333% - 1em);
	}

	@include tablet() {
		width: calc(50% - 1em);
	}

	@include breakpoint-down(xs) {
		width: calc(100% - 1em);
	}
}

.ui.stackable.cards > .card {
	margin: 1em;

	@include medium-desktop() {
		margin: 0.5em
	}
}

.ui.four.doubling.cards > .card {
	margin: 1em;

	@include medium-desktop() {
		margin: 0.5em
	}
}

.generic-card {
	@include card-shadow();
	@include default-shape();

	display: flex;
	flex-direction: column;

	.generic-card-header {
		border-bottom: 1px solid $borderColor;
		padding: 10px 20px;
		display: flex;
		align-items: center;

		@include small-desktop {
			padding: 10px 15px;
		}

		.user-photo {
			margin-right: 12px;
		}

		.user-content {
			.user-link {
				color: $mainColor;
				font-size: 16px;
				font-weight: 600;
				margin-bottom: 5px;
				word-break: break-all;
			}

			.card-date {
				font-size: 13px;
				font-weight: 400;
				color: $mainTextColor;
			}
		}

		.lets-meet {
			margin-left: auto;
		}
	}

	.generic-card-content {
		padding: 20px 25px;
		flex-grow: 1;

		@include small-desktop {
			padding: 15px 15px;
		}

		.generic-card-title-link {
			color: $headlinesColor3;
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 5px;
			display: block;
		}

		.generic-card-categories {
			color: $mainTextColor;
			font-size: 14px;

			.mb5 {
				margin-bottom: 0 !important;
			}

			a {
				color: $mainColor;
			}
		}
	}

	.generic-card-footer {
		border-top: 1px solid $borderColor;
		padding: 15px 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		@include small-desktop {
			padding: 10px 15px;
		}

		.budget {
			.label-class {
				display: block;
				text-transform: uppercase;
				font-size: 12px;
				letter-spacing: 1px;
				font-weight: 600;
				color: $mainTextColor;
			}

			.value-class {
				font-size: 16px;
				font-weight: 600;
				display: block;
				color: $mainColor;
			}
		}
	}
}