/*
 * BASIC PARAGRAPH type
 */

.paragraph--type--basic-paragraph {
  max-width: 720px;
  margin: 0 auto;
  clear: both;
}
.page-node-type-concert .paragraph--type--basic-paragraph {
  margin: 0;
}

/*
 * READMOREBOX type
 */

.readmorebox {
  width: 33.333333%;
  float: left;
  margin-bottom: 2em;
}

.readmorebox > div {
  padding: 0 10px;
}

.readmorebox img {
  width: 100%;
}

.readmorebox a {
  text-decoration: none;
  color: inherit;
}


/* @todo javascript to loop through all instances of .same-height on page, then set height of .same-height to greatest actual height */
.readmorebox div.same-height { 
  font-size: .9em;
  line-height: 1.4em;
  margin-bottom: 1.4em; 
}

/* query is specific for behavior of this component */
@media screen and (max-width: 600px) {
  .readmorebox {
    width: 100%;
    float: none;
  }
}

/*
 * SINGLE IMAGE type
 */

.paragraph--type--single-image {
  max-width: 720px;
  margin: 0;
  clear: both;
  padding: 1em 0;
}

/*
 * TWO IMAGES type
 */
 
.paragraph--type--two-images {
  max-width: 720px;
  margin: 0;
  clear: both;
  padding: 1em 0;
}

.paragraph--type--two-images >div {
  margin: 0 -2%;
}

.paragraph--type--two-images img {
  max-width: 46%;
  float: left;
  padding: 0 2%;
}

/*
 * THREE IMAGES type
 */
 
.paragraph--type--three-images {
  max-width: 1024px;
  margin: 0;
  clear: both;
  padding: 1em 0;
}

.paragraph--type--three-images >div {
  margin: 0 -1.5%;
}

.paragraph--type--three-images img {
  max-width: 30%;
  float: left;
  padding: 0 1.5%;
}

@media screen and (max-width: 767px) {
  .paragraph--type--three-images >div {
  margin: 0;
}

.paragraph--type--three-images img {
  max-width: 100%;
  float: none;
  display: block;
  margin: 1em auto;
  padding: 0;
}
}