// Text Boxes
.paragraph--type--text-boxes.paragraph--view-mode--custom,
.paragraph--type--text-boxes.paragraph--view-mode--default {
  &.layout--rounded_image {
    padding: 40px 1em;

    .field--name-parade-paragraphs {
      .field--name-parade-image {
        float: left;
        width: calc(26% - 2 * 15px);
        padding: 20px 15px 0;
        margin: auto;
        img {
          border-radius: 100%;
        }
      }
      .field--name-parade-title,
      .field--name-parade-text {
        float: right;
        width: 66%;
      }
      .field--name-parade-title {
        padding: 20px 15px 0;
        margin-top: 0;
      }
      .field--name-parade-text {
        padding: 0 15px;
      }
    }

    @media screen and (max-width: 768px) {
      .paragraph--type--text-box {
        clear: both;
        margin-bottom: 2rem;
        &:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
        }
      }
    }

    @media screen and (max-width: 480px) {
      .field--name-parade-paragraphs {
        .field--name-parade-image {
          float: none;
          width: 150px;
          margin: 0 auto;
        }

        .field--name-parade-title,
        .field--name-parade-text {
          float: none;
          width: 100%;
        }
      }
    }

  }

  @media screen and (max-width: 768px) {
    &.layout--lot_infos .paragraph--type--text-box {
      text-align: left;
    }
  }
}

$sidePadding: 1em !default;

// Text Boxes -> Text Box
.paragraph--type--text-box.paragraph--view-mode--default {
  padding: 2em $sidePadding;
  background: inherit;
}

@media (min-width: 767px) {
  .col {
    float: left;
  }

  @for $i from 1 through 5 {
    .col-#{$i} {
      width: calc(100% / #{$i} - 2 * #{$sidePadding})
    }
  }
}