.c-newscard {
	text-decoration: none;
	height: 100%;
	display: block;
	position: relative;
	transition: transform 200ms ease-out;

	&::after {
		content: "";
		border-radius: 5px;
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-shadow: 0 10px 15px rgba(0,0,0,0.2);
		opacity: 0.4;
		transition: opacity 200ms linear;
	}

	&[href]:hover {
		transform: translateY(-3px);

		&::after {
			opacity: 1;
		}
	}
}


.c-newscard__frame {
	@include border-radius(m);
	height: 100%;
	background: palette(neutral, 0);
}


.c-newscard__content {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: space(4);

	@include mq(m) {
		padding: space(5);
	}

	@include mq(l) {
		height: 100%;
		padding-left: $site-newscard-image-width;
	}

	.c-newscard--no-image & {
		@include mq(l) {
			padding-left: space(10);
			padding-right: space(6);
		}
	}
}

.c-newscard__content--message {
	align-items: center;
	justify-content: center;
	padding: space(6);
}


.c-newscard__image {
	position: absolute;
	top:0;
	left: space(4);
	display: block;
	height: $site-newscard-image-height;
	width: $site-newscard-image-width;
	transform: translateY(-50%);
	background: linear-gradient(-120deg, #{palette(tertiary, 500)}, palette(tertiary, 500));
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

	@include mq(l) {
		top: space(6);
		left: 0;
		transform: translateX(-50%);
	}
}

.c-newscard__date {
	@include text-style(5);
	display: block;
	color: palette(secondary, 300);

	@include mq($max: l) {
		text-align: right;
		transform: translateY(space(-1));
	}
}

.c-newscard__title {
	@include font-family(primary);
	@include font-weight(bold);
	@include font-size(m);
	margin-top: space(2);
	margin-bottom: space(3);
	color: palette(tertiary, 300);
	transition: color 200ms linear;

	.c-newscard--no-image & {
		margin-top: 0;
	}
}


.c-newscard__intro {
	margin-bottom: space(3);
	color: palette(text, 500);
}

.c-newscard__more {
	margin-top: auto;
}