.sq-callto-action {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  margin-bottom: 40px;
  @media (min-width: $screen-sm) {
    
  }

  &__container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  &--full-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .sq-callto-action__content {
      background: rgba(46, 58, 72, .7);
      padding: 60px;
      border-radius: 17px;
    }
  }
  &--featured {
    flex-wrap: wrap;
    .sq-callto-action__image {
      max-width: 110px;
      margin: 0;
    }
    .sq-callto-action__left {
      flex-basis: 100%;
    }
    .sq-callto-action__right {
      flex-basis: 100%;
      padding: 0;
    }
  }

  &__header {
    color: $sq-color-muted-darkest;
  }
  &__info {
    color: $sq-color-muted;
  }

  &__image {
    max-width: 170px;
    @media screen and (min-width: $screen-sm) {
      max-width: 230px;
    }
    margin: auto;
    max-height: 255px;
  }
  &__left {
    flex-basis: 100%;
    padding: 40px 0;
    @media screen and (min-width: $screen-sm) {
      flex-basis: 30%;
      padding: 40px 40px;
    }
    overflow: hidden;
    img {
      width: 100%;
    }
  }

  &__right {
    max-width: 600px;
    flex-basis: 100%;
    padding: 0 0 0 40px;
    @media screen and (min-width: $screen-sm) {
      flex-basis: 70%;
      padding: 0 40px;
    }
    margin: auto;
  }

  &__actions {

  }
  &--dark {
    .sq-callto-action__header {
      color: $sq-color-muted-lightest;
    }
  }
  &--full-bg {
    .sq-callto-action__header {
      color: $sq-color-muted-lightest;
    }
  }
}