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} ) }