.card {
	width: 100%;
	display: flex;
	max-width: unset;
	min-width: unset;
	border: 1px solid $grey;
	flex-direction: column;
	padding: 30px 40px;
	align-self: flex-start;
	flex-grow: 0;
	position: relative;

	.dashicons-lock {
		position: absolute;
		top: 10px;
		right: 10px;
		color: rgba(0, 115, 170, 0.2);
	}

	.card-header {
		flex-direction: row;
		display: flex;
		align-items: center;

		.title {
			font-size: 18px;
			line-height: 1.5;
		}

		.icon {
			margin-right: 10px;

			&.dashicon {
				width: 40px;
				height: 40px;
				fill: $blue;
				font-size: 40px;
				color: $blue;
			}
		}
	}

	.card-content {
		display: flex;
		flex-direction: column;
		flex-grow: 1;

		a,
		button {
			align-self: flex-start;
			margin-top: auto;
		}
	}

	p {
		font-size: 15px;
		color: #616161;
	}

	.card-description {
		margin: 15px 0 25px;
	}

	.card-button-wrap {
		display: flex;
		margin-top: auto;

		a {
			margin-left: 10px;

			&:first-child {
				margin: 0;
			}
		}
	}

	.components-external-link{
		color: $blue;
	}
}

@mixin card--laptop() {

	.card {
		margin: 0 0 20px;
	}
}

@mixin card--desktop() {

	.card {
		padding: 20px 30px;
		margin: 0 0 20px;
	}
}

@mixin card--desktop-large() {

	.card {
		padding: 30px 40px;
		margin: 0 0 30px;
	}
}
