.drawer{width:60%;max-width:350px}.drawerContainer{display:flex;flex-direction:column;align-items:center;width:100%}.title{margin:10px 0}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#222;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0}#app{display:flex;flex-direction:column;min-height:100vh}header{display:flex;justify-content:flex-end;background-color:#673ab8}header nav{display:flex}header a{color:#fff;padding:.75rem;text-decoration:none}header a.active{background-color:#0005}header a:hover{background-color:#0008}main{flex:auto;display:flex;align-items:flex-start;text-align:center}@media (max-width: 639px){main{margin:.5rem}}.masonry{column-count:12;column-gap:16px;padding:8px}.masonry-item{display:inline-block;width:100%;margin-bottom:16px;break-inside:avoid;border-radius:8px;overflow:hidden;background:#f5f5f5;box-shadow:0 2px 8px #0000001a;transition:box-shadow .2s ease,transform .2s ease}.masonry-item img{width:100%;height:auto;display:block;object-fit:cover;margin-bottom:8px}.masonry-item:hover{box-shadow:0 8px 20px #00000026;transform:translateY(-2px)}@media (max-width: 1600px){.masonry{column-count:8}}@media (max-width: 1200px){.masonry{column-count:6}}@media (max-width: 900px){.masonry{column-count:4}}@media (max-width: 700px){.masonry{column-count:3}}@media (max-width: 500px){.masonry{column-count:2}}