//============================================
// Layout
//============================================


// Section
//============================================

.l-section
  padding-top: $space-plusHalf
  padding-bottom: $space-plusHalf

  +mq($bp-lg)
    padding-top: $space-double
    padding-bottom: $space-double


// Container
//============================================

// 1. Make text truncation work inside containers.
// 2. Declare side specific margins & paddings
//    to avoid conflicts when weaker styles try
//    to apply top & bottom margins or paddings.

.l-container
  width: 100% // 1.
  max-width: $layout-width-xs
  padding-left: $layout-gutter-xs // 2.
  padding-right: $layout-gutter-xs // 2.
  margin-left: auto // 2.
  margin-right: auto // 2.

  +mq($bp-sm)
    max-width: $layout-width-sm
    padding-left: $layout-gutter-sm
    padding-right: $layout-gutter-sm

  +mq($bp-md)
    max-width: $layout-width-md
    padding-left: $layout-gutter-md
    padding-right: $layout-gutter-md

  +mq($bp-lg)
    max-width: $layout-width-lg
    padding-left: $layout-gutter-lg
    padding-right: $layout-gutter-lg
