//==========================
//        Columns
//==========================

body {
  .l-neuron-grid {
    display: flex;
    flex-wrap: wrap;
    position: relative;

    margin-right: -15px;
    margin-left: -15px;
    margin-bottom: -30px;

    &__item {
      width: 100%;

      padding-right: 15px;
      padding-left: 15px;
      margin-bottom: 30px;
    }

    &--metro {
      .l-neuron-grid__item {
        max-width: 25%;
        flex: 0 0 25%;
      }
    }
  }

  .l-neuron-grid-wrapper {
    @include neuron-columns("flex");
  }

  @media (max-width: $screen-md-max) {
    .l-neuron-grid-wrapper-tablet {
      @include neuron-columns("flex");
    }
  }

  @media (max-width: $screen-sm-max) {
    .l-neuron-grid-wrapper-mobile {
      @include neuron-columns("flex");
    }
  }
}

@media (min-width: $screen-md-max) {
  .l-neuron-grid-wrapper {
    @include neuron-offset-spacing();
  }
}

@media (max-width: $screen-md-max) {
  .l-neuron-grid-wrapper-tablet {
    @include neuron-offset-spacing();
  }
}

@media (max-width: $screen-sm-max) {
  .l-neuron-grid-wrapper-mobile {
    @include neuron-offset-spacing();
  }
}

.l-neuron-grid {
  &__item[data-metro-column="1"] {
    max-width: 8.333% !important;
    flex: 0 0 8.333% !important;
  }
  &__item[data-metro-column="2"] {
    max-width: 16.666% !important;
    flex: 0 0 16.666% !important;
  }
  &__item[data-metro-column="3"] {
    max-width: 25% !important;
    flex: 0 0 25% !important;
  }
  &__item[data-metro-column="4"] {
    max-width: 33.333% !important;
    flex: 0 0 33.333% !important;
  }
  &__item[data-metro-column="5"] {
    max-width: 41.666% !important;
    flex: 0 0 41.666% !important;
  }
  &__item[data-metro-column="6"] {
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }
  &__item[data-metro-column="7"] {
    max-width: 58.333% !important;
    flex: 0 0 58.333% !important;
  }
  &__item[data-metro-column="8"] {
    max-width: 66.666% !important;
    flex: 0 0 66.666% !important;
  }
  &__item[data-metro-column="9"] {
    max-width: 75% !important;
    flex: 0 0 75% !important;
  }
  &__item[data-metro-column="10"] {
    max-width: 83.333% !important;
    flex: 0 0 83.333% !important;
  }
  &__item[data-metro-column="11"] {
    max-width: 91.666% !important;
    flex: 0 0 91.666% !important;
  }
  &__item[data-metro-column="12"] {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

@media (max-width: $screen-md-max) {
  .l-neuron-grid__item-metro-full {
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }
}

@media (max-width: $screen-sm-max) {
  .l-neuron-grid__item-metro-full {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}
