How to use the linaria/react.styled.main function in linaria

/* @flow */

import * as React from 'react';
import { styled } from 'linaria/react';

const Container = styled.main`
  flex: 1;

  @media (min-width: 640px) {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
`;

const Inner = styled.div`
  padding: 64px 24px 24px;

  @media (min-width: 640px) {
    padding: 64px;
  }

Get Started
            
          
          
            
          
        
      
    
  );
}

const HeroContainer = styled.main`
  position: relative;

  ${media.large} {
    padding: 64px 0;
    background-image: url(${require('../../assets/linaria-logomark.svg')});
    background-repeat: no-repeat;
    background-position: bottom right;
  }
`;

const Row = styled.div`
  ${media.large} {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }