/* Module: List Columns
----------------------------------------------- */

.module--list-columns {
  padding: 45px 0 15px;

  @include tablet() {
      padding: 75px 0 30px;
  }

  &-horizontal {

    .list-columns {
      &__content {
        text-align: left;
        margin-bottom: 30px;

        @include desktop() {
          margin-bottom: 0;
        }
      }

      &__button {
        width: 100%;
        flex: 0 100%;
        text-align: left;
      }


    }

    @include desktop() {
      .row {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
      }

      .list-columns {
        flex: 1 auto;
        width: 74%;

        &__content {
          flex: 0 25%;
          width: 25%;
          padding: 0;

          .entry__content {
            padding: 0 15px;
          }
        }
      }
    }
  }
}

.list-columns {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;

    &__content {
        padding: 0 15px;
        max-width: 100%;

        @include material() {
            margin: 0 auto;
        }
    }

    &__button {
        padding: 15px;
        text-align: center;

        &.list-columns__button {
          &--center {
              text-align: center;
          }

          &--left {
              text-align: left;
          }

          &--right {
              text-align: right;
          }
        }
    }

    .list-column {
        @include tablet-max(){
            text-align: center;
        }
    }
}

.list-items {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 25px 15px;

    .list-item {
        flex: 0 100%;

        @include tablet() {
            &--2 {
                flex: 0 (100%/2);
            }

            &--3 {
                flex: 0 (100%/3);
            }
        }

        li {
            padding-left: 20px;
            position: relative;
            margin-bottom: 10px;

            &:before {
                content: "\2022";
                color: $white;
                position: absolute;
                left: 0;
                top: 50%;
                font-size: rem-calc(28px);
                transform: translateY(-50%);
            }
        }
    }
}

.list-column {
    padding: 25px 0;
    text-align: left;
    width: 100%;

    @include material() {
        flex-flow: column;
        text-align: center;
        padding-top: 0;
    }

    @include tablet() {
        width: (100% / 3);

        @include material() {
            padding-left: 30px;
            padding-right: 30px;
        }
    }

    @include desktop() {
        width: (100% / 4);
    }

    &--2 {
        @include desktop() {
            width: (100% / 2);
        }
    }

    &--3 {
        @include desktop() {
            width: (100% / 3);
        }
    }

    &--5 {
        @include desktop() {
            width: (100% / 5);
        }
    }

    &--6 {
        @include desktop() {
            width: (100% / 6);
        }
    }

    &__image {
        display: block;
        margin-bottom: 8px;

        @include material() {
            padding: 0;
            flex: 0 100%;
        }
    }

    &__headline {
        @include material() {
            text-transform: none;
            font-weight: 400;
            font-size: rem-calc(24);
        }
    }
}
