@charset "UTF-8";

/* --------------------------------------------
BLOGS
--------------------------------------------- */
body:has( #blogs ){
	background : url( "../images/blog/bg.webp" ) center top repeat #c2961c;
}
@media screen and ( width <= 750px ){
	#column:has( #blogs ){
		padding-bottom : calc( 48 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#column:has( #blogs ){
		padding-bottom : calc( 80 var( --remBase ) );
	}
}
#blogs > h2{
	font-size : 6rem;
}
#blogs > ul > li > a{
	display : block;
	background-color : white;
	border-color : black;
	border-style : solid;
}
#blogs > ul > li > a p{
	margin-top : calc( 24 var( --remBase ) );
	line-height : 1.7;
}
#blogs > ul > li > a span{
	display : grid;
	place-items : center;
	height : calc( 39 var( --remBase ) );
	margin-left : auto;
	font-size : 2.4rem;
	color : black;
	background-color : #d9d9d9;
}
@media screen and ( width <= 750px ){
	#blogs > h2{
		margin-bottom : calc( 40 var( --remBase ) );
		font-size : 4rem;
	}
	#blogs > ul > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#blogs > ul > li > a{
		padding-inline : calc( 16 var( --percentBase ) );
		padding-top : calc( 14 var( --remBase ) );
		padding-bottom : calc( 34 var( --remBase ) );
		border-width : calc( 6 var( --remBase ) );
	}
	#blogs > ul > li > a > :where( h2 , h3 ){
		font-size : 4rem;
	}
	#blogs > ul > li > a p{
		font-size : 2rem;
	}
	#blogs > ul > li > a span{
		width : calc( 120 * 100% / 324 );
		margin-top : calc( 24 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#blogs > h2{
		margin-bottom : calc( 80 var( --remBase ) );
		font-size : 6rem;
	}
	#blogs > ul > li + li{
		margin-top : calc( 80 var( --remBase ) );
	}
	#blogs > ul > li > a{
		padding-inline : calc( 32 * 100% / 1400 );
		padding-top : calc( 52 var( --remBase ) );
		padding-bottom : calc( 42 var( --remBase ) );
		border-width : calc( 12 var( --remBase ) );
	}
	#blogs > ul > li > a > :where( h2 , h3 ){
		font-size : 6rem;
	}
	#blogs > ul > li > a p{
		font-size : 2.4rem;
	}
	#blogs > ul > li > a span{
		width : calc( 120 * 100% / 1336 );
		margin-top : calc( 24 var( --remBase ) );
	}
}

/* --------------------------------------------
PAGINATION
--------------------------------------------- */
#pagination ul{
	display : grid;
	justify-content : center;
}
#pagination li{
	position : relative;
}
#pagination li::before{
	position : absolute;
	z-index : -1;
	display : block;
	width : 100%;
	height : 100%;
	content : "";
	background-color : black;
}
#pagination a{
	position : relative;
	display : grid;
	place-items : center;
	width : 100%;
	height : 100%;
	background-color : #ffef04;
	border-color : black;
	border-style : solid;
	border-width : calc( 10 var( --remBase ) );
}
#pagination .prev{
	grid-column : 1;
}
#pagination .next{
	grid-column : 2;
}
@media screen and ( width <= 750px ){
	#pagination{
		margin-top : calc( 40 var( --remBase ) );
	}
	#pagination ul{
		grid-template-rows : calc( 87 var( --remBase ) );
		grid-template-columns : repeat( 2 , calc( 87 var( --percentBase ) ) );
		column-gap : calc( 26 var( --percentBase ) );
	}
	#pagination li::before{
		top : calc( 4 var( --remBase ) );
		left : calc( 4 * 100% / 87 );
	}
	#pagination img{
		height : calc( 27.2 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#pagination{
		margin-top : calc( 80 var( --remBase ) );
	}
	#pagination ul{
		grid-template-rows : calc( 127 var( --remBase ) );
		grid-template-columns : repeat( 2 , calc( 127 * 100% / 1400 ) );
		column-gap : calc( 32 * 100% / 1400 );
	}
	#pagination li::before{
		top : calc( 4 var( --remBase ) );
		left : calc( 4 * 100% / 127 );
	}
	#pagination img{
		height : calc( 40.8 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#pagination a:hover{
		top : calc( 4 var( --remBase ) );
	}
	@media screen and ( width <= 750px ){
		#pagination a:hover{
			left : calc( 4 * 100% / 87 );
		}
	}
	@media screen and ( width > 750px ) , print{
		#pagination a:hover{
			left : calc( 4 * 100% / 127 );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#pagination a{
		transition : top var( --transitionBase ) , left var( --transitionBase );
	}
}