@import "compass/css3";

// =============================================
// Demo General Styles
// =============================================

* {
  box-sizing: border-box;
}

header {
  padding: 6px 0;
  text-align: center;
}

.item {
	margin: 0 1.5%; // 1.5% because I'm a cold hard criminal brochacho. #randomvaluesmakemecrazy
  background: #eee; // make it pretty.
}

.title {
  background: white;
}

.text {
  background: gray;
}

.text-bottom {
  background: red;
  color: white;
}


// =============================================
// The Flexbox Sticky Footer Shuffle
// =============================================

.row {
  display: flex;
  flex-direction: row;
  align-items: stretch; // this is set by default. you can use it or not.

  // Need this for images inside a flexbox
  // container otherwise shit stretches.
  img {
    width: 100%;
    height: auto;
  }
}

.item {
  display: flex; // set the context
  flex: 1; // flex an equal space for the entire container sire.
  align-items: stretch; // make my junk stretch the complete height sir mixalot.
  flex-direction: column; // stuff can't be a row. gotstah be a column.
}

.text-bottom {
  display: flex; // set the context
  flex: 1; // flex an equal amt of space yo!
  align-items: flex-end; // make that shit sit on the bottom dawg.
}