fix: make images responsive

2024-02-13 15:18:59 +01:00
parent 5689e68610
commit 4b193541b2
6 changed files with 50 additions and 49 deletions
@@ -1,4 +1,27 @@
+.wrapper {
+  z-index: 0;
+}
+
+.picture {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 400ms ease-in-out 0s;
+  transform: translate(-50%, -50%) !important;
+}
+
 .heroImage {
-  object-fit: cover;
+  object-fit: contain;
  width: 100%;
-}
+  height: auto;
+  max-height: 600px;
+  min-height: 100px;
+  object-fit: cover;
+  object-position: center;
+  aspect-ratio: 1/1;
+}
+
+@media screen and (min-width: 740px) {
+  .heroImage {
+    aspect-ratio: auto;
+  }
+}