/*
###########################################################
ARTICLE
###########################################################
*/

/* .page--article{} */

.article__header{
	margin-top: 3rem;
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--gutter, 1rem);
	max-width: 635px;
	max-width: var(--width-tight, 635px);
	text-align: left;
}
@media (min-width: 735px){
	.article__header{
		text-align: center;
	}
}

.article__title{
	margin-top: 0;
}

.article__date{
	margin-top: 1rem;
}

/*.article__author{}*/

.article__category{
	opacity: 0.5;
}

.article__media-ctn{
	margin-left: auto;
	margin-right: auto;
	max-width: var(--width-site);
}
@media (min-width: 735px){
	.article__media-ctn{
		padding-left: var(--gutter);
		padding-right: var(--gutter);
	}
}

.article__media{
	width: 100%;
}

.article__media-caption{
	margin-top: 0.5rem;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	font-family: var(--font-base-italic);
	text-align: right;
}
@media (min-width: 735px){
	.article__media-caption{
		padding-left: 0;
		padding-right: 0;
	}
}

.article__content{
	width: 100%;
	max-width: var(--width-tight);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}





/*
###########################################################
COLLECTION
###########################################################
*/

/* .page--article-collection{} */

.article-collection__title{
	margin: 3rem auto;
	padding: 0 var(--gutter, 1rem);
	max-width: var(--width-tight, 635px);
	text-align: center;
}

.article-collection__intro{
  margin-top: 3rem;
  margin-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--gutter);
  max-width: var(--width-tight);
  text-align: center;
}

.article-collection__grid-ctn{
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  max-width: var(--width-tight);
}

/* .article-collection__grid{} */





/*
###########################################################
CARD
###########################################################
*/

.article-card{
	position: relative;
	border-bottom: 1px solid #ececec;
 	transition: all 0.1s;
 	padding-bottom: 1rem;
 	padding-top: 1rem;
 } 

 .article-card:hover{
  	transform: translateY(-1px);
 }

 .article-card:active{
  	transform: translateY(0);
 }

 .article-card__link{
 	display: flex;
 	justify-content: space-between;  
 	color: var(--color-fg);
 } 

 .article-card__info-ctn{
 	padding-right: 10%;
 }

 .article-card__title{
 	margin-top: 0;
 	margin-bottom: 0;
 	font-family: var(--font-base-bold);
 }

 .article-card__subtitle{
 	margin-top: 0.5rem;
 	opacity: 0.7;
	font-family: var(--font-base);
 }

 .article-card__metas{
 	color: var(--color-hl);
 	margin-top: 0.5rem;
 }

/*.article-card__authors{}*/

.article-card__categories{
	color: var(--color-fg);
	opacity: 0.5;
}

 .article-card__media-ctn{
 	position: relative;
 	width: 100px;
 	height: 100px;
 	border-radius: 8px;
 	flex-shrink: 0;
 	overflow: hidden;
 }

 .article-card__media{
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
 }