*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{width:100vw;max-width:100vw}header{margin:20px}header ul img{width:80px;height:80px}header ul{list-style:none;display:flex;flex-direction:column;text-align:center;gap:15px}header ul li input{width:200px;height:40px;border-radius:5px;border:1px solid #ccc;padding:0 10px}main{width:100vw;max-width:100vw;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;justify-items:center;padding:20px}.dish{position:relative;width:300px;max-width:300px;display:grid;grid-template-areas:"name image" "category image";gap:10px;padding:20px;border-radius:5px;border:1px solid #ccc;box-shadow:0 0 10px #0000001a}.dish:after{content:"";position:absolute;top:0;left:-50%;width:100%;height:100%;background-color:#0f0;z-index:-1;transition:all .3s ease-in-out;opacity:0}.dish:hover:after{opacity:.5;left:0}.dish h1{grid-area:name;max-width:100px;font-size:1.5rem;font-weight:600;margin-right:15px;word-wrap:break-word}.dish h2{grid-area:category;font-size:1.2rem;font-weight:400;max-width:100px;margin-right:15px;word-wrap:break-word}.dish img{grid-area:image;width:100%;height:100%;object-fit:cover;border-radius:5px}@media (min-width: 1000px){header ul{flex-direction:row;justify-content:center;align-items:center}}