CSS workarounds

1 files changed, 16 insertions, 8 deletions

diff --git a/src/components/landing/sections/Software.module.css b/src/components/landing/sections/Software.module.css
index 758a848..fddc727 100644
--- a/src/components/landing/sections/Software.module.css
+++ b/src/components/landing/sections/Software.module.css
@@ -29,8 +29,6 @@
   grid-row: 1 / span 2;
   min-height: 200px;
   overflow: hidden;
-  background-size: cover;
-  background-position: center center;
   --ifm-color-primary: #038a99;
   --ifm-color-primary-dark: #037c8a;
   --ifm-color-primary-darker: #037582;
@@ -73,22 +71,25 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 1;
+  z-index: -1;
   object-fit: cover;
   transition: transform var(--ifm-transition-fast) ease;
 }
 
-.software--refinery:hover .refinery__background,
-.software--refinery:focus-within .refinery__background {
+.software--refinery:has(.cover-link:hover) .refinery__background,
+.software--refinery:has(.cover-link:focus) .refinery__background {
   transform: scale(140%);
 }
 
 .content {
   position: relative;
   height: 100%;
-  z-index: 99;
   display: flex;
   flex-direction: column;
+  background-size: cover;
+  background-position: center center;
+  /* Force browser rendering before transform. */
+  filter: blur(0px);
 }
 
 .content--refinery {
@@ -201,6 +202,7 @@
 
 .screenshot__backdrop {
   display: none;
+  z-index: -2;
   background-size: cover;
   background-position: center center;
 }
@@ -210,13 +212,17 @@
   display: block;
 }
 
-.screenshot, .screenshot__backdrop {
+.screenshot,
+.screenshot__backdrop {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 1;
+}
+
+.screenshot {
+  z-index: -1;
 }
 
 .content--screenshot {
@@ -336,6 +342,7 @@
 
   .software-grid {
     grid-template: min-content / 1fr;
+    gap: 1.5rem;
   }
 
   .software {
@@ -351,6 +358,7 @@
   .overlay--screenshot {
     padding: 1rem 2rem 2rem 2rem;
     font-size: 1rem;
+    transform: none;
   }
 }