diff options
Diffstat (limited to 'packages/website/ts/@next/pages/about/mission.tsx')
| -rw-r--r-- | packages/website/ts/@next/pages/about/mission.tsx | 34 |
1 files changed, 27 insertions, 7 deletions
diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx index b06130345..286d2629f 100644 --- a/packages/website/ts/@next/pages/about/mission.tsx +++ b/packages/website/ts/@next/pages/about/mission.tsx @@ -35,13 +35,14 @@ export const NextAboutMission = () => ( linkLabel="Our mission and values" linkUrl="#" > - <Section isFullWidth={true}> - <Image - src="/images/@next/about/about-mission@2x.jpg" - height="372" - alt="" - isCentered={true} - /> + <Section isFullWidth={true} isPadded={false}> + <FullWidthImage> + <Image + src="/images/@next/about/about-office.png" + alt="0x Offices" + isCentered={true} + /> + </FullWidthImage> </Section> <Section isFlex={true} maxWidth="1170px" wrapWidth="100%"> @@ -74,3 +75,22 @@ const StyledDefinition = styled(Definition)` border-top: 1px solid #eaeaea; } `; + +const FullWidthImage = styled.figure` + width: 100vw; + margin-left: calc(50% - 50vw); + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + @media (min-width: 768px) { + height: 500px; + } + + @media (max-width: 768px) { + height: 400px; + } +`; |