.workspace { box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(calc(-50% + 150px), -50%); width: calc(100vw - 300px); border: var(--primary-color) 3px solid; padding: 0px; margin: 0px; border-radius: 10px 0px 0px 10px; border-right: none; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; } .workspace .header p:first-child { font-size: 1.5em; color: var(--secondary-color); font-weight: 600; } .workspace .header p:first-child::before { content: "# "; } .workspace .header { padding: 20px; border-bottom: var(--primary-color) 3px solid; } .workspace .thumbnail-container { width: calc(100% - 300px); height: auto; max-height: calc(100vh - 400px); overflow: hidden; margin: 10px; border-radius: 10px; } .workspace .thumbnail { max-width: 100%; max-height: 100%; margin: 0px; padding: 0px; transition: transform 0.5s; border-radius: 10px; } .workspace .thumbnail:hover { transform: scale(1.5); } .workspace .right { border-left: 3px solid var(--primary-color); display: flex; align-items: center; }