@import (reference) '~app/web/resources/styles/main.less';

.home-articles {
	padding-bottom: 15px;
}

.home-articles a {
    color: inherit;
}

.home-articles-header {
	height: 58px;
	line-height: 58px;
	background-color: #f1f3f5;
	text-align: center;
	font-size: 28px;
	color: #333;
}

.home-article {
	font-size: 14px;
	color: #111;
	margin-top: 20px;
}

.home-article-img {
	width: 100%;
	display: block;
}

.home-article-title {
	height: 40px;
}

.articles-index-title {
	font-weight: 400;
	font-size: 20px;
}

.articles-index-subtitle {
	font-size: 16px;
	color: #777;
}

.card--article {
	.card-body {
		background: #fff;
		margin: -25px 0 0;
		position: relative;
	}

	.card-title {
		height: 80px;
		padding: 10px 15px;
		position: relative;
		font-size: 16px;
		white-space: normal;
	}

	.card-image {
		border-radius: 4px;
    	overflow: hidden;

		a {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		img {
			object-fit: cover;
			height: 100%;
		}
	}

	.card-category {		
		padding: 7px 15px;
	}
}

@media @md-up {
	.card--article:nth-child(5n+1),
	.card--article:nth-child(5n+2) {
		width: 50%;

		.card-title {
			height: 60px;
		}
	}
}

.article-wrap {
	max-width: 800px;
    margin: 0 auto;
    font-family: "Source Sans Pro";
}

.article-title {
	font-size: 22px;
	margin-bottom: 0.8em;

	@media @sm-up {
		font-size: 32px;
	}
}

.article-body {
	font-size: 14px;
	
	@media @sm-up {
		font-size: 18px;
	}
}