@import "paragraph.featured";

.paragraph--featured {
  .paragraph--section & {
    background-color: #f3f3f3;
    padding: 30px 1em;
    @media(min-width: 900px) {
      padding: 50px 1em;
    }
  }
  // javascript counts and adds class based on multiple sections
  &.multiple {
    padding: 0 2em;
    @media(min-width: 900px) {
      padding: 0 2em;
    }
    @media(min-width: 1200px) {
      padding: 0;
    }
  }
  &.multiple.first {
    padding: 30px 2em 0;
    @media(min-width: 900px) {
      padding: 50px 2em 0;
    }
    @media(min-width: 1200px) {
      padding: 50px 0 0;
    }
  }
  &.multiple.last {
    padding: 0 2em 30px;
    @media(min-width: 900px) {
      padding: 0 2em 50px;
    }
    @media(min-width: 1200px) {
      padding: 0 0 50px;
    }
  }
  .title {
    margin-top: 25px;
    font-size: 24px;
    line-height: 2;
    color: #4A4A4A;
  }
  .field--name-field-featured-items {
    margin-top: 30px;
    margin-bottom: 0.75rem;
  }
  > .container {
    > .card__actionbar {
      padding-right: 0;
    }
  }
  footer.card__actionbar {
    padding-right: 0;
  }
}
