/* Articles */
/* margin for mobile & desktop */
@media only screen and (max-width: 767.98px) {
	#articles {
		width: 90vw;
	}
	#articles .card {
		height: 180px;
	}
	#articles .card-title  {
		/* defines # of lines before text overflow */
		-webkit-line-clamp: 2;
	}
}
@media only screen and (min-width: 767.99px) {
	#articles {
		width: 75vw;
	}
	#articles .card {
		height: 280px;
	}
	#articles .card-title  {
		/* defines # of lines before text overflow */
		-webkit-line-clamp: 3;
	}
}


#articles h2 {
	font-weight: bolder;
}

#articles .row {
	margin: 0 auto 2rem auto;  /* top margin 0 since there's to gutter-y */
}

#articles .card {
	overflow: hidden;
	border: transparent;
	border-radius: 20px;
}

/* Card Image and Overlay */
/* https://css-tricks.com/zooming-background-images/ */
#articles .card-img {
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center;
	transition: all 0.4s ease-out;
}
#articles .card:hover .card-img,
#articles .card:focus .card-img {
	transform: scale(1.2);
}
#articles .card-img-overlay {
	background: linear-gradient(transparent 0%, rgba(0,0,0,0.7) 90%);
}

/* Card Texts */
/* ellipsis for overflow after n number of lines 
   Source: https://stackoverflow.com/a/41137262 */
#articles .card-title {
	display: -webkit-box;
    max-width: 100%;
    -webkit-box-orient: vertical;
    overflow: hidden;
	font-weight: bold;
}
@media only screen and (max-width: 991.98px) {
	#articles .card-text {
		margin-bottom: -10px;
	}
}
@media only screen and (min-width: 991.99px) {
	#articles .card-text {
		margin-bottom: 0;
	}
}


/* View All link */
/* https://css-irl.info/animating-underlines/ */
#articles a {
	color: var(--brown);
	text-decoration: underline 0.08em rgba(0, 0, 0, 0);
  	transition: text-decoration-color 300ms;
}
@media (hover) {
	/* When hover is supported */
	#articles a:hover {
		text-decoration-color: var(--brown);
	}
}
#articles .btn, 
#articles .btn:focus {
	border: none;
	box-shadow: none;
}