// Text Boxes
.paragraph--type--text-boxes.paragraph--view-mode--inverse,
.paragraph--type--text-boxes.paragraph--view-mode--custom,
.paragraph--type--text-boxes.paragraph--view-mode--default {

  // Main Title
  .field--name-parade-title {
    @include campaign-title;
    color: $text-color-strong;
  }

  // Layouts
  &.layout--smallinfo,
  &.layout--lot_infos,
  &.layout--text_icon {
    .paragraph--type--image-text {
      text-align: center;
      float: none;
      margin-right: 0;
    }
  }

  &.layout--lot_infos-grey {
    background-color: $parade-lightgrey;
  }

  &.layout--contacts {
    // @fixme this is mess but was quick
    @media screen and (min-width: 768px) {
      > .paragraph-inner > .field--name-parade-title {
        width: 33%;
        float: left;
      }
      .field--name-parade-paragraphs {
        width: 66%;
        float: left;
      }
    }
    .paragraph--type--text-box {
      position: relative;
      margin-bottom: 2em;
      .paragraph-inner {
        padding: 0;
        margin: 0;
        overflow: hidden;
      }
      .field--name-parade-image {
        float: left;
        // position: relative;
        // left: 0;
        // top: 0;
        max-width: 30%;
        max-height: 100%;
        // text-align: right;
        img {
          max-height: 100%;
          width: auto;
          border-radius: 50%;
        }
      }
      .field--name-parade-title {
        margin-bottom: 0;
      }
      .field--name-parade-title,
      .field--name-parade-text,
      .field--name-parade-call-to-action {
        width: 66%;
        float: right;
      }
    }
  }

  @include md {
    &.layout--lot_infos .paragraph--type--text-box {
      text-align: left;
    }

    // Equal height columns
    &[class*="columns-"] > .paragraph-inner > .field--name-parade-paragraphs {
      //			display: flex;
      //			flex-wrap: wrap;

      > .col > .paragraph-inner {
        height: 100%;
      }
    }
  }

}

// Text Boxes -> Text Box
.paragraph--type--text-box.paragraph--view-mode--custom,
.paragraph--type--text-box.paragraph--view-mode--default {
  .field--name-parade-image{
    width: 100%;
    float: none;
    margin-right: 0;
    text-align: center;
    img{
      margin-bottom: 0;
    }
  }

  // Some padding trickery.
  // @fixme Remove after merging tieto_base

  &.layout--none {
    padding: 0;
    .paragraph-inner {
      box-shadow: none;
      padding: 1em;
    }
  }

  ul, ol {
    margin: 0;
    padding: 0;
  }

  // Text Box item title
  .field--name-parade-title {
    @include campaign-title-item;
  }

  &.layout--normal .paragraph-inner {
    background-color: #f8f8f8; // @fixme Replace with variable.
  }

  &.layout--blue .paragraph-inner {
    color: white;
    background-color: $parade-blue;
    .field--name-parade-title {
      color: white;
    }
  }

  &.layout--red .paragraph-inner {
    color: white;
    background-color: $parade-red;
    .field--name-parade-title {
      color: white;
    }
  }

  &.layout--orange .paragraph-inner {
    color: white;
    background-color: $parade-orange;
    .field--name-parade-title {
      color: white;
    }
  }

  &.layout--green .paragraph-inner {
    color: white;
    background: $parade-green;
    .field--name-parade-title {
      color: white;
    }
  }

  .field--name-parade-call-to-action {
    // @fixme after tieto_base merge.
    margin: 0;
    text-align: left;
    .button {
      padding: 0.25rem 1rem;
    }
  }
}
.paragraph--type--text-box.paragraph--view-mode--default {
  @include md {
    //    &.col-2:nth-child(2n+1),
    //    &.col-3:nth-child(3n+1),
    //    &.col-4:nth-child(4n+1) {
    //      padding-left: 0;
    //    }
    //    &.col-2:nth-child(2n+2),
    //    &.col-3:nth-child(3n+3),
    //    &.col-4:nth-child(4n+4) {
    //      padding-right: 0;
    //    }
    &.col {
      padding: 40px 0;
    }
    &.col-2{
      @include gallery(2 of 4);
    }
    &.col-3{
      @include gallery(2 of 6);
    }
    &.col-4{
      @include gallery(2 of 8);
    }
  }

  .paragraph-inner {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    padding: 3em;
  }
}