Design forbedring TechniqueDetailed

frontend/src/pages/Techniques/TechniqueDetailed.css

@@ -1,12 +1,74 @@
-.technique-background {
-  margin: -32px;
-  padding: 32px;
-
+.technique-detailed-top::before {
+  content: "";
+
+  position: absolute;
+  inset: 0;
+
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.45) 0%,
+    rgba(0, 0, 0, 0.20) 40%,
+    rgba(0, 0, 0, 0.10) 70%,
+#001819 100%
+);
+
+  z-index: 0;
+}
+
+.technique-detailed-top {
+  position: relative;
+
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 24px;
+
+  width: calc(100% + 168px);
+
+  margin-top: -68px;
+  margin-left: -84px;
+  margin-right: -84px;
+  border-radius: 0 0 16px 16px;
+
   background-image: url("../../assets/deltaworks-earth-7641871.jpg");
   background-size: cover;
-  background-position: center;
+
+  padding: 64px 69px;
+
+  /* viser toppen av bildet */
+  background-position: center top;
+
   background-repeat: no-repeat;
+}
 
+.technique-detailed-top > * {
+position: relative;
+z-index: 1;
+}
+
+/* Tablet */
+@media (max-width: 1200px) {
+  .technique-detailed-top {
+    margin-left: -20px;
+    margin-right: -20px;
+
+    width: calc(100% + 40px);
+
+    padding: 32px;
+  }
+}
+
+/* Mobil */
+@media (max-width: 768px) {
+  .technique-detailed-top {
+    width: 100%;
+
+    margin-left: 0;
+    margin-right: 0;
+
+    padding: 24px;
+
+    grid-template-columns: 1fr;
+  }
 }
 
 .technique-detailed-page {
@@ -21,16 +83,6 @@
   width: min(1400px, calc(100% - 64px));
 }
 
-.technique-detailed-top {
-  position: relative;
-
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: 24px;
-
-  overflow: hidden;
-}
-
 .technique-detailed-tags {
   display: flex;
   gap: 12px;
@@ -42,6 +94,7 @@
 
 
 .technique-description {
+  margin-top: -24px;
   width: 100%;
 }