/*

#########################
### MOLECULE: benefit ###
#########################

### INFO:

The benefit molecule is a combination of icon, headline and text atom.
No list organismn is needed here, you can use as much benefit molecules as desired.

### MODIFIERS:

none

*/

// TODO: implement mono font and modifier
@import '../../extends';
@import '../../functions';
@import '../../mixins';
@import '../../variables';

@import '../atoms/_text.scss';
@import '../atoms/_color.scss';
@import '../atoms/_headline.scss';
@import '../atoms/_icon.scss';
@import '../atoms/divider';

section.#{utility('content')}.benefits {
  &.websites,
  &.ads {
    h3,
    .#{molecule('lnk')} {
      &-text {
        color: color('white');
      }
      &-icon {
        fill: color('blue-ribbon');
        background: color('white');
      }
    }
  }

  &.stories,
  &.e-mails {
    h3,
    .#{molecule('lnk')} {
      &-text {
        color: color('black');
      }
    }
  }
}

.#{molecule('benefit')} {
  position: relative;
  display: flex;
  margin: 20px;

	@media (min-width: 768px) {
    padding: 0;
    margin: 50px 0;
    flex: 0 0 calc(33.333333333% - 40px);
  }

  &-icon {
    @include ico-3;
    @include ico-blue-ribbon;
    margin-right: 10px;
  }

  &-text {
    display: flex;
    flex-direction: column;

    &-headline {
      @include txt;
      @include txt-strong;
      @include color-black;
      margin-bottom: 0.3em;
    }

    &-copy {
      @include txt;
      @include txt-2;
      margin-bottom: 10px;
    }

    b {
      @include txt-2;
    }
  }

  &-card {
    @include gradient-websites;

    &-left {
      @include benefit-card-left-shadow;
      z-index: 1;

      @media (min-width: 768px) {
        margin-left: 55px;
      }
    }

    &-right {
      @include benefit-card-right-shadow;
    }

    &-content {
      padding: 45px 50px;
    }
  }
}

.#{atom('divider-benefit')} {
  @include divider-benefit;
}
