/* Article Block
/*------------------------------------------------------------*/
:root {
	--article-text: var(--grey);
	--article-text-hover: #666;
  
	--article-tag: var(--primary);
	--article-tag-hover: var(--secondary);
	--aritlce-tag-divider: 1px solid rgba(0, 0, 0, .2);
  
	--article-tag-feature: var(--primary);
	--article-tag-feature-hover: var(--secondary);
	
	--article-tag-sponsor-bg: #FDD000;
	--article-tag-sponsor-hover-bg: #FFE814;
	--article-tag-sponsor-text: var(--primary);
  
	--readmore-arrow: var(--primary);
}

.article {
	margin-bottom: 20px;
}

.article__overview {
	background-color: var(--block-bg);
	padding: 10px 15px 15px 15px;
  }

/* Thumbnail */
.article__thumb {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	position: absolute;
	top: 0;
  }
  

/* Title */
.article__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .2px;
	color: var(--article-text);
	position: relative;
	transition: color .3s ease-in-out;
	margin: 0;
}

/* Video Indicator */
.article__video {
	width: 48px;
	height: 48px;
	background-color: rgba(0, 0, 0, .75);
	font-size: 42px;
	color: #FFF;
	position: absolute;
	left: 0;
	bottom: 0;
}

/* Article Content */
.article__content {
	width: 100%;
	font-size: 16px;
	font-weight: normal;
	letter-spacing: .2px;
	line-height: 1.6;
	color: var(--article-text);
	margin: 8px 0;
	display: none;
}


/* Article Link Wrapper */
.article__link {
	position: relative;
	display: block;
}

.article__link:hover .article__title {
	color: #666;
}

.article__link:hover .fa-arrow-right {
	transform: translateX(4px);
}

.article__link--thumb {
	width: 100%;
	padding-top: 52%;
	overflow: hidden;
  }
  


/* Read More */
.article__more {
	font-size: 14px;
	margin-top: 8px;
}

.article__more .fa-arrow-right {
	transition: transform .3s ease-in-out;
}

.article__more:hover .fa-arrow-right {
	transform: translateX(4px);
}


/* Article Block
/*------------------------------------------------------------*/
.article__categories {
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.article__categories li {
	margin-right: 6px;
	display: inline-block;
}

/* Category Tag */
.article__categories .tag {
	font-size: 13px;
	font-weight: bold;
	color: var(--article-tag);
	display: block;
	position: relative;
}

.article__categories .tag:hover {
	color: var(--article-tag-hover);
}

.article__categories .tag--feature {
	color: var(--article-tag-feature);
}

.article__categories .tag--feature:hover {
	color: var(--article-tag-feature-hover);
}

/* Sponsor Tag */
.article__categories .tag--sponsor {
	font-size: 11px;
	background-color: var(--article-tag-sponsor-bg);
	color: var(--article-tag-sponsor-text);
	padding: .2rem .4rem;
	border-radius: 1rem;
}

.article__categories .tag--sponsor:hover {
	background-color: var(--article-tag-sponsor-hover-bg);
	color: var(--article-tag-sponsor-text);
}


/* Video Timer */
.video__length {
	font-size: 14px;
	font-weight: 600;
	background-color: rgba(0, 0, 0, .9);
	color: #FFF;
	padding: 4px 8px;
	position: absolute;
	right: 10px;
	bottom: 10px;
}

.video__length .iconify {
	margin-right: 4px;
}


/* Video overlay when hover */
.video__overlay {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .4);
	color: #FFF;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .3s ease-in-out;
}

.article__link:hover .video__overlay {
	opacity: 1;
}

.video__overlay .iconify {
	width: 60px;
	height: 60px;
}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.article .article__title {
	  height: 44px;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;  
	  overflow: hidden;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.article {
	  margin-bottom: 30px;
	}
}