#projects{display: flex; flex-wrap: wrap; justify-content: center; gap: 32px;}
#projects > a{display: grid; grid-template-rows: 2fr 1fr; width: 320px; height: 240px; border-radius: 16px; text-decoration: none; color: inherit; overflow: hidden; box-shadow: 4px 4px 4px rgb(0,0,0,0.5); transition: transform 0.2s, box-shadow 0.2s;}

#projects > a:hover,
#projects > a:focus{transform: translateY(-4px); box-shadow: 8px 8px 8px rgb(0,0,0,0.4);}

#projects > a > div:nth-child(1){width: auto; height: auto; overflow: hidden;}
#projects > a > div:nth-child(1) > img{width: 100%; height: 100%;}

#projects > a > div:nth-child(2){padding: 16px; width: 320px; display: grid; gap: 8px;}
#projects > a > div:nth-child(2) > h2{font-size: 1.25rem; overflow: hidden; text-overflow: ellipsis;}
#projects > a > div:nth-child(2) > p{font-size: 0.9rem; text-wrap: nowrap; overflow: hidden; text-overflow: ellipsis;}