.app-main{box-sizing:border-box;position:relative;top:calc(var(--header-height));display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;background-color:var(--background-color);padding:20px}img{width:100%;height:auto;border-radius:10px}.arch-nav-bar-header{background-color:#000;display:flex;flex-direction:row;position:fixed;width:100%;height:var(--header-height);top:0;left:0;align-items:center;z-index:1}.arch-nav-bar-header-logo{width:50px;margin-left:20px;animation:none}.arch-nav-bar-header-logo:hover{transform:none;cursor:default}.arch-nav-bar-header-title{color:#fff;font-weight:700;font-family:Times New Roman,Times,serif}@media (width > 300px){.arch-nav-bar-header-title{font-size:14px;margin-left:10px}}@media (width > 600px){.arch-nav-bar-header-title{font-size:20px;margin-left:15px}}@media (width > 900px){.arch-nav-bar-header-title{font-size:24px;margin-left:20px}}.single-image-wrapper{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;padding:20px;background-color:#f9f9f9;font-family:Helvetica Neue,Arial,sans-serif;height:100vh;box-sizing:border-box;position:relative}.info-panel{width:280px;margin-right:20px;padding:15px;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 8px #0000001a;background-color:#fff;overflow-y:auto;transition:transform .3s ease}.info-panel.visible{transform:translate(0)}.image-container{flex:1;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:8px;background-color:#fff;box-shadow:0 2px 8px #0000001a;padding:20px;height:100%;box-sizing:border-box}.image-canvas{max-width:100%;max-height:100%;display:block;border-radius:4px;margin:0;box-shadow:0 1px 4px #0000001a}.toggle-button{position:absolute;top:20px;right:20px;background-color:#333;color:#fff;border:none;border-radius:4px;padding:10px;cursor:pointer;z-index:1000;display:none}@media (max-width: 768px){.single-image-wrapper{flex-direction:column}.info-panel{position:fixed;top:0;left:0;height:100%;z-index:999;transform:translate(-100%);width:80%;max-width:300px;margin-right:0}.toggle-button{display:block}.image-container{width:100%;padding:0}.image-canvas{max-width:100%;max-height:100%}}body{margin:0;padding:0;border:0}#root{min-height:100vh;background-color:var(--background-color)}html{--header-height: 60px;--background-color: rgb(255, 255, 255)}img+img{margin-top:10px}img{animation:fadeIn ease 3s;animation-iteration-count:1;animation-fill-mode:forwards;cursor:pointer}img:hover{transform:scale(1.015);transition:all .3s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}