@charset "UTF-8";

/* --------------------------------------------
CASES
INTERVIEW
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:where( #cases , #interviews ){
		padding-bottom : calc( 60 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:where( #cases , #interviews ){
		padding-bottom : calc( 88 var( --remBase ) );
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#faqLede{
		font-size : 1.4rem;
		line-height : 2;
	}
}
.categoryLink01 ul{
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 8 var( --remBase ) );
	column-gap : calc( 8 var( --percentBase ) );
}
.categoryLink01 a{
	display : grid;
	place-items : center;
	height : calc( 40 var( --remBase ) );
	padding-inline : calc( 20 var( --remBase ) );
	line-height : 1.5;
}
.categoryLink01 a[aria-current]{
	color : black;
	background-color : var( --yellow );
}
.categoryLink01 a:not( [aria-current] ){
	color : #444343;
	background-color : #f1f2ed;
}
@media screen and ( width <= 750px ){
	.categoryLink01{
		margin-top : calc( 16 var( --remBase ) );
	}
	.categoryLink01 ul{
		justify-content : start;
	}
	.categoryLink01 a{
		font-size : 1.4rem;
	}
}
@media print , screen and ( width > 750px ){
	.categoryLink01 ul{
		justify-content : center;
	}
	.categoryLink01 a{
		font-size : 1.6rem;
	}
}
@media ( hover : hover ){
	.categoryLink01 a:hover{
		color : black;
		background-color : var( --yellow );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.categoryLink01 a{
		transition : color var( --transitionBase ) , background-color var( --transitionBase );
	}
}

/* --------------------------------------------
NEWS
COLUMN
--------------------------------------------- */
:where( #news , #column ) > h2{
	font-weight : 700;
	line-height : 1.3;
	letter-spacing : .1em;
}
@media screen and ( width <= 750px ){
	:where( #news , #column ){
		padding-bottom : calc( 120 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:where( #news , #column ){
		display : grid;
		grid-template-columns : calc( 1040 var( --percentBase ) ) calc( 320 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
		padding-bottom : calc( 80 var( --remBase ) );
	}
	:where( #news , #column ) > h2{
		grid-row : 1;
		grid-column : 1;
		font-size : 4rem;
	}
	:where( #news , #column ):has( > h2 ) .list-articles01{
		grid-row : 2;
		margin-top : calc( 40 var( --remBase ) );
	}
	:where( #news , #column ):has( > h2 ) #pagination{
		grid-row : 3;
	}
	:where( #news , #column ):not( :has( > h2 ) ) .list-articles01{
		grid-row : 1;
	}
	:where( #news , #column ):not( :has( > h2 ) ) #pagination{
		grid-row : 2;
	}
	:where( #news , #column ) #pagination{
		grid-column : 1;
		justify-self : start;
	}
}