diff --git a/components/Section/Header/header.module.css b/components/Section/Header/header.module.css
index f96cc08d2..e5d762621 100644
--- a/components/Section/Header/header.module.css
+++ b/components/Section/Header/header.module.css
@@ -1,20 +1,51 @@
.header {
display: grid;
gap: var(--Spacing-x1);
- grid-template-columns: 1fr auto;
+ grid-template-columns: 1fr;
+ align-items: baseline;
}
-.title {
- grid-column: 1/2;
- grid-row: 1/2;
+.title,
+.subtitle {
+ grid-column: 1 / -1;
+}
+
+.linkWrapper {
+ display: flex;
+ align-items: baseline;
+ gap: var(--Spacing-x-half);
+ grid-column: 1 / -1;
+ justify-self: start;
}
.link {
- grid-column: 2/-1;
- grid-row: 1/2;
+ display: flex;
+ align-items: center;
}
-.subtitle {
- grid-column: 1/-1;
- grid-row: 2;
+.icon {
+ align-self: center;
+}
+
+@media screen and (min-width: 768px) {
+ .header {
+ grid-template-columns: 1fr auto;
+ }
+
+ .title {
+ grid-column: 1 / 2;
+ }
+
+ .subtitle {
+ grid-column: 1 / 2;
+ }
+
+ .linkWrapper {
+ grid-column: 2 / 3;
+ justify-self: end;
+ }
+
+ .link {
+ align-items: baseline;
+ }
}
diff --git a/components/Section/Header/index.tsx b/components/Section/Header/index.tsx
index c4354bd5e..0537b526a 100644
--- a/components/Section/Header/index.tsx
+++ b/components/Section/Header/index.tsx
@@ -1,3 +1,4 @@
+import ArrowRight from "@/components/Icons/ArrowRight"
import Link from "@/components/TempDesignSystem/Link"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
@@ -21,12 +22,20 @@ export default function SectionHeader({
>
{title}
+ {subtitle && {subtitle}}
{link ? (
-
- {link.text}
-
+
+
+
+ {link.text}
+
+
) : null}
- {subtitle}
)
}