/* ARTICLES OVERVIEW — harmonized with the precision-minimal design system */

.articles-container{
	min-height: 72vh;
	min-height: 72dvh;
	max-width: 1000px;
	margin: 60px auto;
}
.articles-container a{
	text-decoration: none;
}

.article{
	display: grid;
	grid-template-columns: 35% auto;
	grid-column-gap: 30px;
	overflow: hidden;
	transition: .25s;
	cursor: pointer;
	height: 170px;
	margin-bottom: 18px;
	background-color: var(--card);
	border: 1px solid var(--line);
	color: var(--ink);
	position: relative;
}
.article:hover{
	border-color: var(--periwinkle);
	box-shadow: 0 20px 44px -28px rgba(69, 75, 120, 0.45);
}
/* index-style corner arrow */
.article::after{
	content: "→";
	position: absolute;
	top: 12px;
	right: 14px;
	font-size: 15px;
	color: var(--ink);
	background-color: var(--accent);
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.25s, transform 0.25s;
}
.article:hover::after{
	opacity: 1;
	transform: translateX(0);
}

.article .img-container{
	overflow: hidden;
}
.article img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .4s;
	filter: grayscale(0.35);
}
.article:hover img{
	transform: scale(1.05);
	filter: grayscale(0);
}

.article .details-container{
	padding: 22px 50px 0px 0px;
}
.article .details-container h2{
	font-family: Teko, sans-serif;
	font-size: 30px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 8px;
	white-space: nowrap;
	overflow: hidden;
}
.article:hover h2{
	color: var(--deep);
}
.article .details-container p{
	font-size: 15px;
	line-height: 1.55;
	max-height: calc(1.55 * 15 * 3px);
	display: block;
	overflow: hidden;
	transition: .25s;
	color: var(--ink-soft);
}

@media screen and (max-width: 700px){
	.article{
		display: block;
		height: 380px;
	}
	.article img{
		height: 100%;
		width: 100%;
		object-fit: cover;
		filter: grayscale(0);
	}
	.article:hover img{
		transform: scale(1.03);
	}
	.article .details-container{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
		padding: 18px 16px 16px 16px;
		background: linear-gradient(to top, rgba(21, 23, 31, 0.92), rgba(21, 23, 31, 0.75) 60%, transparent);
	}
	.article .details-container h2{
		color: #ffffff;
	}
	.article .details-container p{
		color: rgba(255, 255, 255, 0.85);
	}
	.article::after{
		opacity: 1;
		transform: translateX(0);
	}
}
@media screen and (max-width: 500px){
	.articles-container{
		margin: 24px auto;
	}
	.article .details-container h2{
		font-size: 24px;
	}
}