/* CSS Document */

#topics{
	display: grid;
	& header{
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		background: #fff;
		&:before{
			content: "";
			grid-column: 1 / 4;
			grid-row: 1;
			background: #f2f2f2;
		}
		&>*{
			grid-column: 2;
		}
		& 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{
			justify-self: center;
			padding: 24px 0;
			color: var(--color-pale);
			@media (min-width: 992px) {
				padding: 32px 0;
			}
		}
		
	}
	& section{
		justify-self: center;
		width: var(--wrap);
		margin: 56px 0 40px 0;
		@media (min-width: 992px) {
			margin: 80px 0 64px 0;
		}
		& h3{
			display: none;
		}
	}
}