/* avoid gray background on sidebar */
aside:not(.skip_style) {
	background-color: transparent;
}

.links_grid {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

body main .links_grid li {
	background-color: #f1f1f1;
	
	/*FBK*/
	display: inline-block;
	vertical-align: top;
	width: 205px;
	margin: 0 20px 20px 0;
}

body main .links_grid li:focus-within a {
	background-color: #74a498;
}

body main .links_grid a {
	box-sizing: border-box;
	display: block;
	position: relative;
	z-index: 2;
	padding: 1rem 0.8rem;
	height: 100%;
	color: #555555;
	text-decoration: none;
	font-size: 0.895em;
	
	-webkit-transition: all 200ms ease-out;
	-moz-transition: all 200ms ease-out;
	-o-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}

body main .links_grid a:hover,
body main .links_grid a:focus {
	background-color: #74a498;
	color: #FFFFFF;
	font-weight: bold;
}

.links_grid img {
	display: block;
	max-width: 76px;
	margin: 0 auto;
}

.links_grid a:hover img,
.links_grid a:focus img {
	-webkit-filter: brightness(2.2);
	filter: brightness(2.2);
	opacity: 0.99;
}

h2 + .links_grid {
	margin-top: 1.5rem;
}

.links_grid_icons {
	font-size: 0.947em;
}
.links_grid_icons a {
	text-align: center;
}





/* CSS GRID */
@supports (display: grid) {
	
	.links_grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 8px; grid-auto-rows: 1fr; }
	body main .links_grid li { width: 100%; margin: 0; }
	
	
	@media only screen and (min-width: 900px) {
		body main .links_grid_icons { grid-auto-rows: 1fr }
	}
	
	@media only screen and (max-width: 570px) {
		.links_grid { grid-template-columns: 1fr; }
		.links_grid_icons { grid-template-columns: 1fr 1fr; }
	}
	
}