#Content > IMG { display: block; margin: 30px auto; } #Content > P { line-height: 1.6; } #Content EM { font-style: normal; font-weight: 500; } #Content NAV { display: grid; width: 100%; margin: 30px 0; grid-template-columns: repeat(auto-fill, minmax(40%, 1fr)); grid-gap: 30px; } #Content NAV A { height: 160px; text-align: center; list-style-type: none; outline: 1px solid #CCC; display: flex; justify-content: center; align-items: center; } #Links { margin-bottom: 50px; text-align: center; transform: skewX(-11.6deg); } #Links > A { display: inline-block; position: relative; margin: 0 20px; padding-right: 20px; text-decoration: none; } #Links > A:after { display: block; position: absolute; right: 0px; top: 3px; width: 12px; height: 12px; background: url(/i/icons.210255569.svg#newwin); content: ""; opacity: .25; } #Links > A:hover:after { opacity: 1; } @media screen and (min-width: 981px) { #Links A.Cat { position: relative; margin-left: 12px; padding: 6px 9px 6px 32px; font-size: 14px; font-weight: 500; text-decoration: none; color: #FFF; background: #C41230; border-radius: 2px; border-left: 4px solid #333; } #Content { padding-bottom: 80px; } #Content A IMG { width: 60%; filter: grayscale(1); transition: 200ms; } #Content A:hover IMG { width: 80%; filter: grayscale(0); } } @media screen and (max-width: 980px) { #Content { padding: 60px 30px; } #Links > A { padding-right: 30px; } #Links > A:after { top: 6px; width: 20px; height: 20px; opacity: .5; } #Links SPAN { display: block; margin-top: 30px; } #Links { transform: none; } #Links A.Cat { display: block; margin: 20px 0; padding: 15px; font-size: 28px; font-weight: 500; text-decoration: none; color: #FFF; background: #C41230; border-radius: 2px; } }