.container
  max-width: $size-small
  width: 100%
  margin: 0 auto
  padding: $size-space
  display: flex
  justify-content: space-between
  flex-wrap: wrap

  @media screen and (max-width: $size-small)
    justify-content: center
    padding: $size-space/2

  &.md
    max-width: 660px

  &.nowrap
    flex-wrap: nowrap

  &.center
    justify-content: center
    align-items: center
    text-align: center

  &.column
    flex-direction: column

main > section:first-child
  padding: $size-space*2 $size-space $size-space*3

// Color
.section, .header, .footer
  background-color: var(--background)
  color: var(--paragraph)

  h2, h3, h4
    color: var(--headline)

  a
    color: var(--link)

    &:hover
      text-shadow: 0 0 1px currentColor

  .card
    background-color: var(--card-background)
    z-index: 10
    padding: 1rem
    border-radius: var(--border-radius)
    max-width: 31%
    margin-bottom: 1rem

    img
      margin: 0 auto

    p
      margin-bottom: 0

    @media screen and (max-width: $size-small)
      max-width: 288px
      margin-bottom: 1rem
      text-align: center

.section, .header, .footer
  --background: var(--color-background)
  --paragraph: var(--color-paragraph)
  --headline:  var(--color-headline)
  --link: var(--color-link)
  --card-background: var(--color-card-background)

  &.secondary
    --background: var(--color-secondary-background)
    --paragraph: var(--color-secondary-paragraph)
    --headline:  var(--color-secondary-headline)
    --link: var(--color-secondary-link)
    --card-background: var(--color-secondary-card-background)

  &.tertiary
    --background: var(--color-tertiary-background)
    --paragraph:  var(--color-tertiary-paragraph)
    --headline:  var(--color-tertiary-headline)
    --link: var(--color-tertiary-link)
    --card-background: var(--color-tertiary-card-background)