@import '../../extends';
@import '../../functions';
@import '../../mixins';
@import '../../variables';

@import '../atoms/_text.scss';
@import '../atoms/_headline.scss';

.#{utility('benefits-overview')} {
  margin-bottom: 7em;

  @media (min-width: 1024px) {
    margin-bottom: 8vw;
  }
}

.#{organism('benefits-overview')} {
  &-header {
    grid-column: 1 / 16;

    @media (min-width: 1024px) {
      grid-column: 1 / 12;
    }

    @media (min-width: 1280px) {
      grid-column: 1 / 10;
    }
  }

  &-list {
    grid-column: 1 / 13;

    h2 {
      margin-top: 0;
    }

    .#{molecule('benefit')} {
      margin: 20px 20px 0 0;

      &-icon {
        margin-right: 15px;
      }

      &.principles {
        margin: 50px 20px 100px 0;
      }
    }

    &-developers {
      @media (min-width: 1024px) {
        grid-column: 2 / 10;
      }
    }

    &-business {
      grid-column: 13 / 25;

      @media (min-width: 768px) {
        margin-top: 5em;
      }

      @media (min-width: 1024px) {
        grid-column: 14 / 22;
      }
    }

    &-left {

      @media (min-width: 1024px) {
        grid-column: 3 / 10;
      }
    }
  }

  &-link {
    grid-column: 17 / -1;
    width: 100%;
    margin-top: 2em;

    @media (min-width: 768px) {
      width: auto;
      margin-top: 0;
    }
  }
}
