@mixin title {
  flex: 0 0 100%;
  padding: 0 1rem;
  margin-bottom: 1rem;
  color: #555;
  font-weight: 500;
  @media (min-width: 900px) {
    padding-left: 20px;
  }
}

.paragraph--block {
  .paragraph--section & {
    background-color: #fff;
    padding: 30px 1em;
    @media(min-width: 900px) {
      padding: 50px 1em;
    }
    @media(min-width: 1200px) {
      padding: 50px 0;
    }
    .title {
      @include title;
    }
  }
}

.primary-col {
  padding-left: 1em;
  padding-right: 1em;
  flex-basis: 100%;
  max-width: 100%;

  @media (min-width: 900px) {
    flex: 0 0 calc(100%/1.5);
    max-width: calc(100%/1.5);
    order: 1;
  }

  @media (min-width: 1200px) {
    padding-left: 0;
  }

  // when the first block in the primary column title is disabled
  .block-views > .stream:first-child {
    margin-top: 59px;
  }

  .block-title,
  .section-title {
    font-size: 24px;
    line-height: 1.2;
    margin: 0 0 2rem;
    padding: 0 0 0 40px;
  }

  &.card__actionbar {
    margin: 0;
  }
}

.secondary-col {
  padding-left: 1em;
  padding-right: 1em;
  flex-basis: 100%;
  max-width: 100%;

  @media (min-width: 900px) {
    //margin-top: 1rem;
    margin-top: 59px; //height of primary column block title
    flex: 0 1 calc(100%/3);
    order: 2;
    max-width: calc(100%/3);
  }

  @media (min-width: 1200px) {
    padding-right: 0;
  }

  > .field > .field--item {
    margin-bottom: 0.75rem;
  }

}

[class*='block-views-blockcommunity-activities-block-stream-landing'],
[class*='block-views-blockactivity-stream-block-stream-homepage'] {
  &.card {
    all: revert;
  }

  .card__title,
  .section-title.section-title-stream {
    @include title;
    font-size: 1rem;
  }
}
