Upgrade from bootstrap 4 to 5

templates/item.html

@@ -6,16 +6,40 @@
 <style>
 div.description { margin-left: 2em; color: rgb(96, 96, 96); }
 span.description { color: rgb(96, 96, 96); }
+
+#artwork {
+    position: fixed;   /* This keeps the map in place when the page is scrolled */
+    top: 56px;
+    left: 0;          /* Positioned on the right side */
+    width: 50%;        /* Half the screen width */
+    bottom: 0px;
+    z-index: -1;
+}
+
+#artwork img {
+  object-fit: contain; /* The image will be scaled to maintain its aspect ratio */
+  width: 100%;
+  height: 100%;
+}
+
+
+#main {
+  float: right;       /* Floats the main content to the right */
+  width: 48%;         /* Adjusted width of the main content */
+  height: auto;       /* Height is set to auto, allowing it to expand naturally */
+  margin-right: 1%;
+}
+
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="container-fluid mt-2">
-  <div class="row">
-    <div class="col-md">
-      <img src="{{ image.thumburl }}" class="w-100" />
+    <div id="artwork">
+      <div class="w-100 h-100">
+        <img src="{{ image.thumburl }}" />
+      </div>
     </div>
-      <div class="col-md">
+    <div id="main">
         <h1>{{ self.title() }}</h1>
         {% if label_languages %}
         <p>Label from:
@@ -179,8 +203,6 @@ span.description { color: rgb(96, 96, 96); }
       </form>
       {% endif %}
     </div>
-  </div>
-</div>
 {% endblock %}
 
 {% block script %}