#Content NAV { display: grid; width: 100%; margin-top: 50px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-gap: 20px; } #Content A { height: 160px; text-align: center; list-style-type: none; outline: 1px solid #CCC; display: flex; justify-content: center; align-items: center; } @media screen and (min-width: 981px) { #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 20px 20px 20px; } #Content A IMG { width: 80%; } }