/* CSS Document */

main{
	display: grid;
	overflow: hidden;
}

#feature{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	background: #fff;
	&>*{
		grid-column: 2;
	}
	&:before{
		content: "";
		grid-column: 1 / 4;
		grid-row: 1;
		background: #f2f2f2;
	}
	& h2{
		grid-row: 1;
		display: grid;
		grid-template-columns: 1.5em auto 1.5em;
		justify-self: center;
		grid-gap: 0 0.5em;
		margin: 40px 0;
		color: #4d4d4d;
		font-size: 24px;
		font-family: var(--font-min);
		text-align: center;
		@media (min-width: 992px){
			font-size: 32px;
		}
		&:before{
			content: "";
			grid-column: 1;
			grid-row: 1 / 3;
			align-self: end;
			aspect-ratio: 1;
			background: currentColor;
			transform: translateY(50%);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><path d="M41.03,7.51c-1.14-.4-3.99,5.31-5.34,5.32l-4.39.04c1.6-1.76,2.86-3.72,1.9-4.58-1.6-1.43-4.43-1.59-6.68.07l-6.29,4.63-13.06.13c-1.23.13-2.3.44-3.22.86,0,0,0,0,0,0-.56.25-2.4,1.17-3.35,2.77,0,0,0,0,0,0-.08.12-.16.23-.23.35-.79,1.29-.31,2.8,1.44,3.12.76.14,6.95.23,13.83.28,0,0,0,0,.01,0,.04.04.07.08.11.12l11.11,10.61c2.02,1.93,4.84,2.14,6.62.92,1.58-1.08-1.37-5.17-3.31-7.3l-3.9-4.29h0c5.37.02,9.48.03,9.48.03,2.7-.03,4.71-1.35,5.57-3.94,0,0,1.66-8.47-.31-9.15ZM26.53,16.36c-.52,0-.95-.41-.95-.93,0-.52.41-.94.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95ZM20.84,15.48c0-.52.41-.95.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95-.52,0-.94-.41-.95-.93ZM17.03,14.58c.26,0,.5.1.67.28.17.17.27.4.27.65,0,.52-.41.94-.93.95-.36,0-.68-.2-.84-.5-.07-.13-.11-.27-.11-.43,0-.52.41-.94.93-.95ZM3.01,17.02l-1.54.04c-.23,0-.44-.05-.63-.15.92-1.55,2.77-2.46,3.27-2.68.07.15.12.32.12.51l.02.98c.02.7-.54,1.29-1.24,1.3ZM7.76,16.55c-.52,0-.94-.41-.95-.93,0-.52.41-.94.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95ZM11.36,15.57c0-.52.41-.94.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95-.52,0-.94-.41-.95-.93ZM31.27,16.31c-.52,0-.94-.41-.95-.93,0-.52.41-.94.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95Z"/></svg>') center no-repeat;
			-webkit-mask-size: min(100%, 42px);
		}
		&:after{
			content: "";
			grid-column: 2;
			grid-row: 2;
			height: 2px;
			margin: 0 -0.25em;
			background: currentColor;
			border-radius: 1px;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 2"><path d="M5,2H1c-.55,0-1-.45-1-1S.45,0,1,0h4c.55,0,1,.45,1,1s-.45,1-1,1Z"/></svg>') left top repeat-x;
			-webkit-mask-size: 12px 2px;
		}
	}
	& h2+div{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 32px 24px;
		padding: 32px 0;
		@media (min-width: 576px){
			grid-template-columns: repeat(3, 1fr);
		}
		@media (min-width: 768px){
			grid-template-columns: repeat(5, 1fr);
		}
		@media (min-width: 992px){
			padding: 64px 0;
		}
	}
	& dl{
		display: grid;
		grid-template-rows: auto 1fr;
		grid-gap: 8px;
	}
	& dt{
		display: grid;
		align-items: center;
		color: var(--color-theme);
		font-weight: 700;
		font-size: 18px;
		text-align: center;
		@media (min-width: 992px){
			font-size: 20px;
		}
	}
	& dd{
		&:has(a){
			order: -1;
			display: block;
			border: 4px solid var(--color-theme);
			border-radius: 100%;
			overflow: hidden;
		}
		& img{
			aspect-ratio: 1;
			object-fit: cover;
		}
	}
}

.articleList{
	justify-self: center;
	display: grid;
	grid-gap: 24px;
	width: var(--wrap);
	margin-bottom: 80px;
	@media (min-width: 576px){
		grid-template-columns: repeat(2, 1fr);
		header{
			grid-column: 1 / 3;
		}
	}
	@media (min-width: 992px){
		grid-gap: 56px;
		margin-bottom: 120px;
	}
	& header{
		display: grid;
		grid-gap: 24px;
		@media (min-width: 992px){
			grid-gap: 40px;
		}
		& h2{
			grid-column: 1;
			grid-row: 1;
			display: grid;
			justify-content: center;
			align-items: center;
			column-gap: 1em;
			margin: 48px 0;
			color: #fff;
			font-weight: 700;
			font-size: 20px;
			font-family: var(--font-min);
			text-align: center;
			z-index: 2;
			&:before{
				content: attr(data-caption);
				font-size: 1.8em;
				line-height: 1;
				transform: translateY(-0.15em);
			}
			@media (min-width: 576px){
				display: flex;
				&:before{
					font-size: 2em;
				}
			}
			@media (min-width: 992px){
				margin: 80px 0;
				font-size: 24px;
				&:before{
					font-size: 80px;
				}
			}
		}
		& h2+div{
			color: #4d4d4d;
		}
		& figure{
			grid-column: 1;
			grid-row: 1;
			position: relative;
			&:before{
				content: "";
				position: absolute;
				top: 0;
				left: 50%;
				width: 100vw;
				height: 100%;
				background: rgba(0, 0, 0, 0.4);
				z-index: 1;
				transform: translateX(-50%);
			}
			& img{
				position: absolute;
				top: 0;
				left: 50%;
				width: 100vw;
				height: 100%;
				object-fit: cover;
				transform: translateX(-50%);
				&[src="images/categoryPhoto-05.webp"]{
					background: #fff;
					object-fit: contain;
				}
			}
		}
	}
	& section{
		position: relative;
		display: grid;
		grid-template-columns: 0 1fr 0;
		grid-gap: 16px;
		background: #fff;
		border-radius: 4px;
		overflow: hidden;
		&:not(:has(figure)){
			&:before{
				content: "";
				order: -1;
				aspect-ratio: 540 / 270;
				background: var(--dummy);
			}
		}
		&>*{
			grid-column: 2;
		}
		& h3{
			font-weight: 700;
			font-size: 18px;
			@media (min-width: 992px){
				font-size: 20px;
			}
		}
		& h3+div{
			margin-top: -8px;
			color: #4d4d4d;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			z-index: 1;
		}
		& figure{
			order: -1;
			grid-column: 1 / 4;
			& img{
				aspect-ratio: 540 / 270;
				object-fit: cover;
			}
		}
	}
}