@import "breakpoint";
// CSS for value chain components
.block-views-blockvalue-chain-parts-list-block-1 {
  .view-content {
    display: flex;
    flex-wrap: wrap;
  }
  .views-row {
    width: 50%;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    //padding: 1em .5em;
    padding: 0;
    .field--name-field-icon {
      transition: transform 1s ease;
    }
    &:hover {
      background-color: #e5e9ef;
      .field--name-field-icon {
        transform: rotate(7deg);
      }
    }
    &:last-child {
      border-bottom: 0;
    }
    @include breakpoint(max-width 700px) {
      &:nth-child(2n+0) {
        border-right: 0;
      }
    }
  }
  @include breakpoint(700px) {
    .view-content {
      .views-row {
        //padding: 1.5em 1em;
        padding: 0;
        width: 33.3%;
        &:nth-child(3n+0) {
          border-right: 0;
        }
        &:nth-last-child(2),
        &:nth-last-child(3) {
          border-bottom: 0;
        }
      }
    }
  }
}
.value-chain-teaser {
  &.vm-teaser {
    display: block;
    text-decoration: none;
    &:first-of-type {
      padding: 1em .5em;
      @include breakpoint(700px) {
        padding: 1.5em 1em;
      }
    }
  }
  &__icon {
    width: 80px;
    margin: 0 auto 1em;
  }
  &__title {
    text-align: center;
    h2 {
      font-size: 20px;
    }
  }
}
@import "breakpoint";