Remove .event-header__extra-padding and employed `grid-template-are…

…as` for content positioning.

Removed unnecessary wrapper div in `.event-header__content` for better semantic structure

src/stories/Library/event-header/EventHeader.tsx

@@ -12,13 +12,11 @@ const EventHeader: FC<EventHeaderProps> = ({ title, date, image }) => {
   return (
     <header className="event-header">
       <section className="event-header__content">
-        <div className="event-header__extra-padding">
-          <Tag hasBackground className="event-header__tag">
-            udstilling
-          </Tag>
-          <time className="event-header__date">{date}</time>
-          <h1 className="event-header__title">{title}</h1>
-        </div>
+        <Tag hasBackground className="event-header__tag">
+          Udstilling
+        </Tag>
+        <time className="event-header__date">{date}</time>
+        <h1 className="event-header__title">{title}</h1>
         <a
           href="/"
           className="btn-primary btn-filled btn-large event-header__button"

src/stories/Library/event-header/event-header.scss

@@ -19,21 +19,31 @@
   }
 }
 
-.event-header__extra-padding {
-  padding: 0 $s-3xl;
+.event-header__content {
+  display: grid;
+  grid-template-columns: $s-3xl 1fr $s-3xl;
+  grid-template-areas:
+    ". tag  ."
+    ". date  ."
+    ". title  ."
+    "btn btn btn";
+
   @include breakpoint-s {
-    padding: 0;
+    grid-template-columns: 1fr;
   }
 }
 
 .event-header__tag {
+  grid-area: tag;
+  width: max-content;
   margin: $s-md 0;
   @include breakpoint-s {
     margin: $s-lg 0;
   }
 }
 
 .event-header__date {
+  grid-area: date;
   @extend %text-header-h4;
   display: block;
   margin-bottom: $s-md;
@@ -43,6 +53,7 @@
 }
 
 .event-header__title {
+  grid-area: title;
   @extend %text-header-h1;
   margin-bottom: $s-xl;
   @include breakpoint-s {
@@ -51,6 +62,7 @@
 }
 
 .event-header__button {
+  grid-area: btn;
   width: 100%;
   text-decoration: none;
   @include breakpoint-s {