import styled from 'styled-components'
import media from 'styled-media-query'
import AniLink from 'gatsby-plugin-transition-link/AniLink'

export const ProfileWrapper = styled.section`
  color: var(--texts);
  display: flex;
  flex-direction: column;
`

export const ProfileLink = styled(AniLink)`
  color: var(--texts);
  text-decoration: none;
  transition: color 0.5s;

  &:hover {
    cursor: pointer;
  }
`

export const ProfilePosition = styled.h1`
  display: block;
  font-size: 1rem;
  font-weight: 300;
  margin: 0.5rem auto 1.5rem;

  ${media.lessThan("large")`
    display: none;
  `}
`

export const ProfileDescription = styled.p`
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.4;

  ${media.lessThan("large")`
    display: none;
  `}
`

@@ -8,25 +8,25 @@
 styled from 
-'
+%22
 styled-compo
@@ -30,17 +30,17 @@
 mponents
-'
+%22
 %0Aimport 
@@ -50,17 +50,17 @@
 ia from 
-'
+%22
 styled-m
@@ -69,17 +69,17 @@
 ia-query
-'
+%22
 %0Aimport 
@@ -91,17 +91,17 @@
 nk from 
-'
+%22
 gatsby-p
@@ -133,9 +133,9 @@
 Link
-'
+%22
 %0A%0Aex
@@ -184,71 +184,373 @@
 %60%0A  
-color: var(--texts);%0A  display: flex
+display: $%7Bprops =%3E (props.isMobileHeader ? 'none' : 'flex')%7D;%0A  flex-direction: column;%0A  color: var(--texts);%0A%0A  $%7Bmedia.lessThan('large')%60%0A    display: $%7Bprops =%3E (props.isMobileHeader ? 'flex' : 'none')%7D
 ;%0A  
+ 
-flex-direction: column;
+ align-items: flex-start;%0A    background: var(--mediumBackground);%0A    border-bottom: 1px solid var(--borders);%0A    padding: 1rem;%0A    width: 100vw;%0A  %60%7D
 %0A%60%0A%0A

add a new layout for desktop