/* Magazine covers. The Elets magazine widget was an owl-carousel whose CSS/JS
   (magmain.js, magplugins.js) and cover images lived on www.eletsonline.com
   and now 404, so the covers are served locally in a plain grid. */
.um-mags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 26px 22px;
	max-width: 1120px;
	margin: 30px auto 0;
	padding: 0;
	list-style: none;
}
.um-mags > li { flex: 0 0 176px; max-width: 176px; margin: 0; }
.um-mags a { display: block; border: 0; text-decoration: none; }
.um-mag-cover {
	display: block;
	overflow: hidden;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.um-mag-cover img { display: block; width: 100%; height: auto; }
.um-mags a:hover .um-mag-cover { transform: translateY(-7px); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42); }
.um-mags a:focus-visible .um-mag-cover { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 900px) {
	.um-mags { gap: 20px 16px; }
	.um-mags > li { flex-basis: 138px; max-width: 138px; }
}
@media (max-width: 480px) {
	.um-mags > li { flex-basis: 120px; max-width: 120px; }
}