/*********** News : Featured *************/
/*****************************************/

.archGrid.news_header {
	transition: all 300ms ease-in-out;
	padding: 2em;
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: #fafafa;
	position: relative;
}
.archGrid.news_header:hover {
	background-color:#fff;
	border:1px solid #fff;
	box-shadow:
		0 2.8px 2.2px rgba(0, 0, 0, 0.034),
		0 6.7px 5.3px rgba(0, 0, 0, 0.048),
		0 12.5px 10px rgba(0, 0, 0, 0.06),
		0 22.3px 17.9px rgba(0, 0, 0, 0.072),
		0 41.8px 33.4px rgba(0, 0, 0, 0.086),
		0 100px 80px rgba(0, 0, 0, 0.12)
		;
	z-index:100;
}
.archGrid.news_header:after {
	transition: all 300ms ease-in-out;
	opacity: 0;
	content:  var(--news-lnk-label);
	display: inherit;
	background-color: var(--news-more-bg-color);
	color:  var(--news-more-lnk-color);
	height: calc(10em);
	width: calc(10em);
	border-radius: 100%;
	position: absolute;
	text-align: center;
	align-items: center;
	margin: 9em auto auto calc(50% - 5em);
	pointer-events: none;
	font-weight: 600;
	white-space: pre-wrap;
	text-transform: uppercase;
	-webkit-box-shadow: 0px 0px 30px 10px rgb(0 0 0 / 25%);
	box-shadow: 0px 0px 30px 10px rgb(0 0 0 / 25%);
}
.archGrid.news_header:hover:after {
	transition: all 300ms ease-in-out;
	opacity:1;
}
.archGrid.news_header .card {
	grid-template-rows: min-content min-content min-content;
	grid-template-areas:
		"title media"
		"header media"
		"content media";
	transition: all 300ms ease-in-out;
}
.archGrid.news_header .media {
	background-size: cover;
	background-repeat: no-repeat;
	padding-bottom: 24em;
}
.archGrid.news_header .title {
	grid-template-rows: min-content;
	grid-template-areas: none;
	padding-right:1em;
}
.archGrid.news_header h2 {
	font-size: 175%;
}
.archGrid.news_header .header {
	grid-template-columns: auto min-content;
	grid-template-rows: min-content;
	align-items: center;
	border-bottom:1px solid #ccc;
	padding-bottom: 1em;
	margin-bottom: 1em;
	padding-right:1em;
}
.archGrid.news_header .content {
	padding-right:1em;
}
.archGrid.news_header .header .date {
	color:#000;
	text-transform: uppercase;
	font-size: 75%;
	line-height: 125%;
}
.archGrid.news_header .header .type {
	text-align: right;
	background-color: #000;
	display: inline-block;
	border-radius: 2em;
	white-space: nowrap;
	color: #fff;
	padding: 0.75em 1.75em;
	text-transform: uppercase;
	font-size: 50%;
	line-height: 125%;
	margin: 0;
}
.archGrid.news_header .content .subtitle {
	color:#000;
	font-size: 150%;
	font-weight: 700;
}
.archGrid.news_header .content .text {
	color:#000;
	font-size: 125%;
	padding: 1em 0;
}
.archGrid.news_header .content .keywords {
	color:#000;
	font-style:italic;
}

/*********** News : Colonnes *************/
/*****************************************/

.archGrid.news_col {
	transition: all 300ms ease-in-out;
	border-radius: 4px;
	gap: 2em 2em;
}
.archGrid.news_col .card {
	grid-template-areas: "header" "title" "media" "content";
	grid-template-rows: min-content min-content min-content min-content;
	grid-template-columns: 1fr;
	transition: all 300ms ease-in-out;
	padding: 1em 2em 2em 2em;
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: #fafafa;
	min-height: 60ch;
	position: relative;
	transition: all 300ms ease-in-out;
}
.archGrid.news_col .card:hover {
	background-color: #fff;
	border: 1px solid #fff;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
	z-index: 100;
}
.archGrid.news_col .card:after {
	transition: all 300ms ease-in-out;
	opacity: 0;
	content:  var(--news-lnk-label);
	display: inherit;
	background-color: var(--news-more-bg-color);
	color:  var(--news-more-lnk-color);
	height: calc(10em);
	width: calc(10em);
	border-radius: 100%;
	position: absolute;
	text-align: center;
	align-items: center;
	margin: 12em auto auto 5.5em;
	pointer-events: none;
	font-weight: 600;
	white-space: pre-wrap;
	text-transform: uppercase;
	-webkit-box-shadow: 0px 0px 30px 10px rgb(0 0 0 / 25%);
	box-shadow: 0px 0px 30px 10px rgb(0 0 0 / 25%);
}
.archGrid.news_col .card:hover:after {
	transition: all 300ms ease-in-out;
	opacity: 1;
}
.archGrid.news_col .header {
	grid-template-columns: 1fr;
	grid-template-rows: min-content;
}
.archGrid.news_col .header .date {
	color: #000;
	text-transform: uppercase;
	font-size: 75%;
	line-height: 125%;
	text-align: right;
}
.archGrid.news_col .title {
	grid-template-rows: 1fr;
	grid-template-rows: min-content;
	grid-template-areas: none;
	padding: 0.5em 0 0.5em 0;
}
.archGrid.news_col h2 {
	font-size: 175%;
}
.archGrid.news_col .media {
	background-size: cover;
	background-repeat: no-repeat;
	padding-bottom: 12em;
	margin-bottom: 1em;
}
.archGrid.news_col .content .subtitle {
	color: #000;
	font-size: 125%;
	font-weight: 600;
	line-height: 125%;
	padding-bottom: 1em;
	border-bottom: 1px solid #ddd;
	margin-bottom: 0.5em;
}
.archGrid.news_col .content .text {
	color: #000;
	font-size: 100%;
	padding: 0;
}

/*********** News : Mobile *************/
/***************************************/

.archGrid.news_mobile {
	transition: all 300ms ease-in-out;
	border-radius: 4px;
	gap: 2em 2em;
}
.archGrid.news_mobile .card {
	grid-template-areas: "media" "header" "title" "content";
	grid-template-rows: min-content min-content min-content min-content;
	transition: all 300ms ease-in-out;
	grid-template-columns: 1fr;
	transition: all 300ms ease-in-out;
	border: 1px solid #aaa;
	border-top: 0;
	border-radius: 4px;
	position: relative;
	--news-mobile-side-padding: 1em;
}
.archGrid.news_mobile .header {
	grid-template-rows: min-content;
	grid-template-columns: 1fr;
	padding:0 var(--news-mobile-side-padding);
}
.archGrid.news_mobile .header .date {
	color: #000;
	text-transform: uppercase;
	font-size: 75%;
	line-height: 125%;
	text-align: right;
}
.archGrid.news_mobile .title {
	grid-template-rows: 1fr;
	grid-template-rows: min-content;
	grid-template-areas: none;
	padding: 0.5em var(--news-mobile-side-padding) 0.5em var(--news-mobile-side-padding);
}
.archGrid.news_mobile h2 {
	font-size: 175%;
}
.archGrid.news_mobile .media {
	background-size: cover;
	background-repeat: no-repeat;
	padding-bottom: 12em;
	margin-bottom: 1em;
}
.archGrid.news_mobile .content .subtitle {
	color: #000;
	font-size: 125%;
	font-weight: 600;
	line-height: 125%;
	padding: 0 var(--news-mobile-side-padding) 1em var(--news-mobile-side-padding);
	border-bottom: 1px solid #ddd;
	margin-bottom: 0.5em;
}
.archGrid.news_mobile .content .text {
	color: #000;
	font-size: 100%;
	padding: 0 var(--news-mobile-side-padding) var(--news-mobile-side-padding) var(--news-mobile-side-padding);
}


/*********** Blog col ********************/
/*****************************************/

.archGrid.blog {
	transition: all 300ms ease-in-out;
	border-radius: 4px;
	gap: 2em 2em;
}

.archGrid.blog .card {
	grid-template-rows: min-content min-content min-content min-content;
	grid-template-areas:
		"header header"
		"title title"
		"content content"
		"media media";
	transition: all 300ms ease-in-out;
	grid-template-columns: 1fr;
	transition: all 300ms ease-in-out;
	border: 1px solid #aaa;
	border-radius: 4px;
	position: relative;
	padding:2em;
}

.archGrid.blog .card:hover {
	background-color:#fff;
	border:1px solid #fff;
	box-shadow:
		0 2.8px 2.2px rgba(0, 0, 0, 0.034),
		0 6.7px 5.3px rgba(0, 0, 0, 0.048),
		0 12.5px 10px rgba(0, 0, 0, 0.06),
		0 22.3px 17.9px rgba(0, 0, 0, 0.072),
		0 41.8px 33.4px rgba(0, 0, 0, 0.086),
		0 100px 80px rgba(0, 0, 0, 0.12)
		;
	z-index:100;
}
.archGrid.blog .card:after {
	transition: all 300ms ease-in-out;
	opacity: 0;
	content:  var(--news-lnk-label);
	display: inherit;
	background-color: var(--news-more-bg-color);
	color:  var(--news-more-lnk-color);
	height: calc(10em);
	width: calc(10em);
	border-radius: 100%;
	position: absolute;
	text-align: center;
	align-items: center;
	margin: 9em auto auto calc(50% - 5em);
	pointer-events: none;
	font-weight: 600;
	white-space: pre-wrap;
	text-transform: uppercase;
	-webkit-box-shadow: 0px 0px 30px 10px rgb(0 0 0 / 25%);
	box-shadow: 0px 0px 30px 10px rgb(0 0 0 / 25%);
}
.archGrid.blog .card:hover:after {
	transition: all 300ms ease-in-out;
	opacity:1;
}

.archGrid.blog .media {
	background-size: cover;
	background-repeat: no-repeat;
	padding-bottom: 12em;
}
.archGrid.blog .title {
	grid-template-rows: min-content;
	grid-template-areas: none;
	padding-right:1em;
}
.archGrid.blog h2 {
	font-size: 150%;
}
.archGrid.blog .header {
	grid-template-columns: auto min-content;
	grid-template-rows: min-content;
	align-items: center;
	border-bottom:1px solid #ccc;
	padding-bottom: 1em;
	margin-bottom: 1em;
	padding-right:1em;
}
.archGrid.blog .content {
	padding-right:1em;
}
.archGrid.blog .header .date {
	color:#000;
	text-transform: uppercase;
	font-size: 75%;
	line-height: 125%;
}
.archGrid.blog .header .type {
	text-align: right;
	background-color: #000;
	display: inline-block;
	border-radius: 2em;
	white-space: nowrap;
	color: #fff;
	padding: 0.75em 1.75em;
	text-transform: uppercase;
	font-size: 50%;
	line-height: 125%;
	margin: 0;
}
.archGrid.blog .content .subtitle {
	color:#000;
	font-size: 150%;
	font-weight: 700;
}
.archGrid.blog .content .text {
	color: #000;
	font-size: 125%;
	padding: 0 0 1em 0;
}
.archGrid.blog .content .keywords {
	color:#000;
	font-style:italic;
}