.glance { margin: var(--text-padding); display: grid; grid-template-columns: fit-content(35%) 1fr; grid-row-gap: calc(.5 * var(--text-padding)); } .glance .label { color: var(--text-dimmed); margin-right: var(--text-padding); } .the88x31s { column-width: 90px; text-align: center; } .the88x31s > a { width: 88px; height: 31px; margin: 2px; display: inline-block; } .the88x31s img { width: inherit; height: inherit; overflow: hidden; object-fit: cover; filter: grayscale(1) brightness(.8) opacity(.8); transition: .4s ease-in-out filter; } .the88x31s a:has(img + img) img:first-child { position: absolute; display: none; z-index: 2; } .the88x31s a:hover img { display: initial!important; filter: none; transition: .025s ease-in-out filter; } @media (pointer:coarse) or (pointer:none) { .the88x31s img { filter: contrast(.6) brightness(.6) grayscale(.2); } }