Add match detail map hero image

frontend/assets/css/historico.css

@@ -22,15 +22,20 @@
 .historical-hero__copy {
   display: grid;
   gap: 24px;
+  min-width: 0;
 }
 
 .historical-hero__layout {
   display: grid;
-  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
+  grid-template-columns: minmax(190px, 260px) minmax(0, 0.82fr) minmax(320px, 0.9fr);
   align-items: center;
   gap: 32px;
 }
 
+.historical-hero__layout > * {
+  min-width: 0;
+}
+
 .historical-logo-frame {
   width: min(300px, 100%);
   min-height: 220px;
@@ -42,6 +47,45 @@
 
 .historical-hero__text {
   max-width: 60ch;
+  overflow-wrap: anywhere;
+}
+
+.historical-map-hero {
+  position: relative;
+  overflow: hidden;
+  min-height: 220px;
+  margin: 0;
+  border: 1px solid rgba(210, 182, 118, 0.2);
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgba(19, 24, 16, 0.9), rgba(10, 13, 9, 0.72));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.04),
+    0 18px 40px rgba(0, 0, 0, 0.24);
+}
+
+.historical-map-hero[hidden] {
+  display: none;
+}
+
+.historical-map-hero::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border: 1px solid rgba(210, 182, 118, 0.12);
+  border-radius: inherit;
+  background:
+    linear-gradient(90deg, rgba(7, 9, 7, 0.24), transparent 34%),
+    linear-gradient(180deg, transparent 54%, rgba(7, 9, 7, 0.44));
+  pointer-events: none;
+}
+
+.historical-map-hero__image {
+  width: 100%;
+  height: 100%;
+  min-height: 220px;
+  object-fit: cover;
 }
 
 .historical-content {
@@ -657,7 +701,24 @@
   }
 
   .historical-hero__layout {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .historical-hero__copy,
+  .historical-hero__copy > div,
+  .historical-hero__text {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .historical-map-hero {
+    width: 100%;
+    min-height: 190px;
+  }
+
+  .historical-map-hero__image {
+    min-height: 190px;
   }
 
   .historical-selector {