import styled from 'styled-components/macro'

import { devices } from 'config/devices'

export const Section = styled.section`
  margin-bottom: 30px;

  @media ${devices.tablet} {
    width: 100%;
    padding: 0 0.71rem;
  }
`

export const Title = styled.h2`
  margin-bottom: 17px;
  font-weight: bold;
  font-size: 36px;
  line-height: 24px;
  letter-spacing: -0.02em;
  color: #fff;

  @media ${devices.tablet} {
    display: none;
  }
`

export const Loading = styled.div`
  height: 30px;
  margin-top: 20px;
  font-size: 24px;
  color: #fff;
  text-align: center;
`
