h1{text-align:center}#projects{width:100%;display:grid;gap:1.25rem;grid-template-columns:1fr}@media only screen and (min-width: 576px){#projects{grid-template-columns:repeat(2, 1fr)}}@media only screen and (min-width: 768px){#projects{grid-template-columns:repeat(3, 1fr)}}.project-tile{aspect-ratio:4/3;background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden;max-width:500px;text-decoration:none;outline:1px solid var(--primary);transition:background-size .5s ease}.project-tile>.overlay{width:100%;height:100%;background:var(--form-element-background-color);opacity:.7}.project-tile{position:relative}.project-tile>.desc{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center;color:var(--color)}@media only screen and (max-width: 576px){.project-tile>.desc small{font-size:1rem}}.project-tile:hover{outline-width:7px;outline-style:double}.project-tile:hover>.overlay{opacity:.9}@media not (pointer: fine){.project-tile>.overlay{opacity:.9}}