diff --git a/components/Section/Header/header.module.css b/components/Section/Header/header.module.css index 93a893e31..e5d762621 100644 --- a/components/Section/Header/header.module.css +++ b/components/Section/Header/header.module.css @@ -1,31 +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; -} - +.title, .subtitle { - grid-column: 1 / 2; + grid-column: 1 / -1; } .linkWrapper { display: flex; align-items: baseline; - grid-column: 2 / 3; gap: var(--Spacing-x-half); - justify-self: end; + grid-column: 1 / -1; + justify-self: start; } .link { display: flex; - align-items: baseline; + align-items: center; } .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; + } +}