#projects { display: grid; grid-template-columns: repeat(auto-fill, 28rem); column-gap: 1rem; justify-content: center;}@media screen and (max-width: 720px) { #projects { display: grid; grid-template-columns: 90%; justify-content: center; }}.proj-box { position: relative; display: block; text-decoration: none; color: #222; background-color: #f8f8f8; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #fff; border-right: 1px solid #fff; height: calc(min(24rem, 32vh) + 2px); margin: 1rem;}.proj-box:hover { background-color: #e8eaec; padding: 0; border: 1px solid #ccc;}.proj-box article { position: relative; pointer-events: none; overflow: clip; height: min(24rem, 32vh); padding-top: 0.1rem; margin-left: 1.5rem; margin-right: 1.5rem;}.proj-overlay { position: absolute; pointer-events: none; width: 100%; height: 30%; bottom: 0; left: 0; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 1) 90%); z-index: 1;}